/**
 * Widoki panelu administratora dla modułu marketingowego: Leady + grupy docelowe, Kampanie oraz
 * konfiguracja poczty SMTP i bramki SMS. Wydzielone z App.tsx (monolit 22k linii), aby go nie
 * powiększać. Komponent `Icon` przekazywany jest propem, żeby uniknąć cyklicznego importu.
 */
import { useCallback, useEffect, useState } from 'react';
import { apiFetch } from '../auth';

type IconComponent = (props: { name: string }) => JSX.Element | null;

type LeadSource = 'REGISTERED_USER' | 'MANUAL' | 'IMPORT' | 'FORM';
type LeadStatus = 'NEW' | 'CONTACTED' | 'RESPONDED' | 'UNSUBSCRIBED';

type Lead = {
  id: number;
  name: string | null;
  email: string | null;
  phone: string | null;
  city: string | null;
  source: LeadSource;
  userId: number | null;
  status: LeadStatus;
  tags: string[];
  emailConsent: boolean;
  smsConsent: boolean;
  emailOptOut: boolean;
  smsOptOut: boolean;
  notes: string | null;
  createdAt: string;
};

type TargetGroup = {
  id: number;
  name: string;
  description: string | null;
  sources: LeadSource[];
  city: string | null;
  tag: string | null;
  status: LeadStatus | null;
  requireEmail: boolean;
  requirePhone: boolean;
  requireEmailConsent: boolean;
  requireSmsConsent: boolean;
  memberCount: number;
  createdAt: string;
};

type Channel = 'EMAIL' | 'SMS';
type CampaignStatus = 'DRAFT' | 'SCHEDULED' | 'SENDING' | 'PAUSED' | 'COMPLETED' | 'CANCELLED';

type Campaign = {
  id: number;
  name: string;
  channel: Channel;
  subject: string | null;
  body: string;
  targetGroupId: number;
  scheduledAt: string | null;
  dailyLimit: number;
  status: CampaignStatus;
  sentToday: number;
  createdAt: string;
  createdBy: string | null;
  totalRecipients: number;
  sentCount: number;
};

type CampaignStats = {
  total: number;
  queued: number;
  sent: number;
  delivered: number;
  failed: number;
  bounced: number;
  optedOut: number;
};

const SOURCE_LABEL: Record<LeadSource, string> = {
  REGISTERED_USER: 'Użytkownik',
  MANUAL: 'Ręczny',
  IMPORT: 'Import',
  FORM: 'Formularz',
};

const STATUS_LABEL: Record<LeadStatus, string> = {
  NEW: 'Nowy',
  CONTACTED: 'Kontakt',
  RESPONDED: 'Odpowiedział',
  UNSUBSCRIBED: 'Wypisany',
};

const CAMPAIGN_STATUS_LABEL: Record<CampaignStatus, string> = {
  DRAFT: 'Robocza',
  SCHEDULED: 'Zaplanowana',
  SENDING: 'Wysyłka',
  PAUSED: 'Wstrzymana',
  COMPLETED: 'Zakończona',
  CANCELLED: 'Anulowana',
};

const ALL_SOURCES: LeadSource[] = ['REGISTERED_USER', 'MANUAL', 'IMPORT', 'FORM'];

function errorMessage(err: unknown): string {
  return err instanceof Error ? err.message : 'Wystąpił błąd. Spróbuj ponownie.';
}

/* ============================ LEADY + GRUPY DOCELOWE ============================ */

export function AdminLeadsView({ Icon }: { Icon: IconComponent }) {
  const [section, setSection] = useState<'leads' | 'groups'>('leads');
  return (
    <div className="mkt-wrap">
      <div className="mkt-subnav">
        <button type="button" className={section === 'leads' ? 'active' : ''} onClick={() => setSection('leads')}>
          <Icon name="user" /> Baza leadów
        </button>
        <button type="button" className={section === 'groups' ? 'active' : ''} onClick={() => setSection('groups')}>
          <Icon name="list" /> Grupy docelowe
        </button>
      </div>
      {section === 'leads' ? <LeadsSection Icon={Icon} /> : <TargetGroupsSection Icon={Icon} />}
    </div>
  );
}

function LeadsSection({ Icon }: { Icon: IconComponent }) {
  const [leads, setLeads] = useState<Lead[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [sourceFilter, setSourceFilter] = useState<'' | LeadSource>('');
  const [search, setSearch] = useState('');
  const [busyId, setBusyId] = useState<number | null>(null);

  // Formularz nowego leada.
  const [form, setForm] = useState({ name: '', email: '', phone: '', city: '', tags: '' });
  const [saving, setSaving] = useState(false);

  // Import.
  const [csv, setCsv] = useState('');
  const [importTag, setImportTag] = useState('');
  const [importing, setImporting] = useState(false);
  const [importResult, setImportResult] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (sourceFilter) params.set('source', sourceFilter);
      if (search.trim()) params.set('search', search.trim());
      const data = await apiFetch<Lead[]>(`/admin/leads${params.toString() ? `?${params.toString()}` : ''}`);
      setLeads(data);
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }, [sourceFilter, search]);

  useEffect(() => {
    const timer = setTimeout(load, 200);
    return () => clearTimeout(timer);
  }, [load]);

  const addLead = async () => {
    if (!form.email.trim() && !form.phone.trim()) {
      setError('Podaj co najmniej e-mail lub telefon.');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      await apiFetch<Lead>('/admin/leads', {
        method: 'POST',
        body: JSON.stringify({
          name: form.name.trim() || null,
          email: form.email.trim() || null,
          phone: form.phone.trim() || null,
          city: form.city.trim() || null,
          tags: form.tags.split(',').map((t) => t.trim()).filter(Boolean),
        }),
      });
      setForm({ name: '', email: '', phone: '', city: '', tags: '' });
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const runImport = async () => {
    if (!csv.trim()) return;
    setImporting(true);
    setImportResult(null);
    setError(null);
    try {
      const res = await apiFetch<{ imported: number; skipped: number; messages: string[] }>(
        '/admin/leads/import',
        { method: 'POST', body: JSON.stringify({ csv, defaultTag: importTag.trim() || null }) },
      );
      setImportResult(`Dodano ${res.imported}, pominięto ${res.skipped}.`);
      setCsv('');
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setImporting(false);
    }
  };

  const optOut = async (lead: Lead) => {
    setBusyId(lead.id);
    try {
      await apiFetch(`/admin/leads/${lead.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ emailOptOut: true, smsOptOut: true }),
      });
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  const remove = async (lead: Lead) => {
    setBusyId(lead.id);
    try {
      await apiFetch(`/admin/leads/${lead.id}`, { method: 'DELETE' });
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  return (
    <div className="admin-card mkt-card">
      <div className="admin-card-head">
        <h2>Baza leadów</h2>
        <span className="mkt-count">{leads.length} kontaktów</span>
      </div>

      <div className="mkt-toolbar">
        <div className="mkt-search">
          <Icon name="search" />
          <input
            type="search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Szukaj po nazwie, e-mailu, telefonie, mieście..."
          />
        </div>
        <select value={sourceFilter} onChange={(e) => setSourceFilter(e.target.value as '' | LeadSource)}>
          <option value="">Wszystkie źródła</option>
          {ALL_SOURCES.map((s) => (
            <option key={s} value={s}>{SOURCE_LABEL[s]}</option>
          ))}
        </select>
      </div>

      <div className="mkt-addrow">
        <input placeholder="Nazwa / imię" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
        <input placeholder="E-mail" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
        <input placeholder="Telefon" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
        <input placeholder="Miasto" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} />
        <input placeholder="Tagi (po przecinku)" value={form.tags} onChange={(e) => setForm({ ...form, tags: e.target.value })} />
        <button type="button" className="admin-btn approve" onClick={addLead} disabled={saving}>
          {saving ? 'Zapisywanie...' : 'Dodaj lead'}
        </button>
      </div>

      {error && <p className="mkt-error">{error}</p>}

      {loading ? (
        <p className="admin-empty">Ładowanie...</p>
      ) : leads.length === 0 ? (
        <p className="admin-empty">Brak leadów. Dodaj kontakt lub zaimportuj listę.</p>
      ) : (
        <div className="mkt-table-scroll">
          <table className="mkt-table">
            <thead>
              <tr>
                <th>Nazwa</th><th>Kontakt</th><th>Miasto</th><th>Źródło</th><th>Status</th><th>Zgody</th><th></th>
              </tr>
            </thead>
            <tbody>
              {leads.map((lead) => (
                <tr key={lead.id}>
                  <td>{lead.name || '—'}</td>
                  <td>
                    <div className="mkt-contact">
                      {lead.email && <span>{lead.email}</span>}
                      {lead.phone && <span className="mkt-muted">{lead.phone}</span>}
                    </div>
                  </td>
                  <td>{lead.city || '—'}</td>
                  <td><span className="mkt-chip">{SOURCE_LABEL[lead.source]}</span></td>
                  <td>{STATUS_LABEL[lead.status]}</td>
                  <td>
                    <div className="mkt-consents">
                      <span className={`mkt-dot ${lead.emailConsent && !lead.emailOptOut ? 'on' : 'off'}`} title="Zgoda e-mail">@</span>
                      <span className={`mkt-dot ${lead.smsConsent && !lead.smsOptOut ? 'on' : 'off'}`} title="Zgoda SMS">SMS</span>
                    </div>
                  </td>
                  <td className="mkt-actions">
                    {!(lead.emailOptOut && lead.smsOptOut) && (
                      <button type="button" title="Wypisz z kampanii" disabled={busyId === lead.id} onClick={() => optOut(lead)}>
                        <Icon name="lock" />
                      </button>
                    )}
                    <button type="button" title="Usuń lead" disabled={busyId === lead.id} onClick={() => remove(lead)}>
                      <Icon name="trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="mkt-import">
        <h3><Icon name="document" /> Import kontaktów (CSV)</h3>
        <p className="mkt-muted">Kolumny: <code>nazwa;email;telefon;miasto</code> — jeden kontakt w wierszu, nagłówek opcjonalny.</p>
        <textarea
          rows={4}
          value={csv}
          onChange={(e) => setCsv(e.target.value)}
          placeholder={'Jan Kowalski;jan@example.pl;600100200;Warszawa'}
        />
        <div className="mkt-import-actions">
          <input placeholder="Tag dla importu (opcjonalnie)" value={importTag} onChange={(e) => setImportTag(e.target.value)} />
          <button type="button" className="admin-btn approve" onClick={runImport} disabled={importing || !csv.trim()}>
            {importing ? 'Importowanie...' : 'Importuj'}
          </button>
        </div>
        {importResult && <p className="mkt-ok">{importResult}</p>}
      </div>
    </div>
  );
}

function TargetGroupsSection({ Icon }: { Icon: IconComponent }) {
  const emptyForm = {
    name: '',
    description: '',
    sources: [] as LeadSource[],
    city: '',
    tag: '',
    requireEmail: false,
    requirePhone: false,
    requireEmailConsent: false,
    requireSmsConsent: false,
  };
  const [groups, setGroups] = useState<TargetGroup[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [saving, setSaving] = useState(false);
  const [busyId, setBusyId] = useState<number | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setGroups(await apiFetch<TargetGroup[]>('/admin/target-groups'));
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { load(); }, [load]);

  const toggleSource = (s: LeadSource) => {
    setForm((f) => ({
      ...f,
      sources: f.sources.includes(s) ? f.sources.filter((x) => x !== s) : [...f.sources, s],
    }));
  };

  const create = async () => {
    if (!form.name.trim()) {
      setError('Podaj nazwę grupy.');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      await apiFetch<TargetGroup>('/admin/target-groups', {
        method: 'POST',
        body: JSON.stringify({
          name: form.name.trim(),
          description: form.description.trim() || null,
          sources: form.sources,
          city: form.city.trim() || null,
          tag: form.tag.trim() || null,
          requireEmail: form.requireEmail,
          requirePhone: form.requirePhone,
          requireEmailConsent: form.requireEmailConsent,
          requireSmsConsent: form.requireSmsConsent,
        }),
      });
      setForm(emptyForm);
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const remove = async (group: TargetGroup) => {
    setBusyId(group.id);
    try {
      await apiFetch(`/admin/target-groups/${group.id}`, { method: 'DELETE' });
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  return (
    <div className="mkt-grid-2">
      <div className="admin-card mkt-card">
        <div className="admin-card-head"><h2>Nowa grupa docelowa</h2></div>
        <p className="mkt-muted">Grupa to dynamiczny segment — odbiorcy wyliczają się na bieżąco z kryteriów.</p>
        <div className="mkt-form">
          <label>Nazwa
            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="np. Deweloperzy Warszawa" />
          </label>
          <label>Opis
            <input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Opcjonalny opis" />
          </label>
          <fieldset className="mkt-fieldset">
            <legend>Źródła (puste = wszystkie)</legend>
            <div className="mkt-checks">
              {ALL_SOURCES.map((s) => (
                <label key={s} className="mkt-check">
                  <input type="checkbox" checked={form.sources.includes(s)} onChange={() => toggleSource(s)} />
                  {SOURCE_LABEL[s]}
                </label>
              ))}
            </div>
          </fieldset>
          <div className="mkt-form-row">
            <label>Miasto
              <input value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} placeholder="dowolne" />
            </label>
            <label>Tag
              <input value={form.tag} onChange={(e) => setForm({ ...form, tag: e.target.value })} placeholder="dowolny" />
            </label>
          </div>
          <div className="mkt-checks mkt-checks-col">
            <label className="mkt-check"><input type="checkbox" checked={form.requireEmail} onChange={(e) => setForm({ ...form, requireEmail: e.target.checked })} /> Wymagany e-mail</label>
            <label className="mkt-check"><input type="checkbox" checked={form.requirePhone} onChange={(e) => setForm({ ...form, requirePhone: e.target.checked })} /> Wymagany telefon</label>
            <label className="mkt-check"><input type="checkbox" checked={form.requireEmailConsent} onChange={(e) => setForm({ ...form, requireEmailConsent: e.target.checked })} /> Tylko ze zgodą e-mail</label>
            <label className="mkt-check"><input type="checkbox" checked={form.requireSmsConsent} onChange={(e) => setForm({ ...form, requireSmsConsent: e.target.checked })} /> Tylko ze zgodą SMS</label>
          </div>
          {error && <p className="mkt-error">{error}</p>}
          <button type="button" className="admin-btn approve" onClick={create} disabled={saving}>
            {saving ? 'Zapisywanie...' : 'Utwórz grupę'}
          </button>
        </div>
      </div>

      <div className="admin-card mkt-card">
        <div className="admin-card-head">
          <h2>Grupy docelowe</h2>
          <span className="mkt-count">{groups.length}</span>
        </div>
        {loading ? (
          <p className="admin-empty">Ładowanie...</p>
        ) : groups.length === 0 ? (
          <p className="admin-empty">Brak grup. Utwórz pierwszy segment.</p>
        ) : (
          <ul className="mkt-list">
            {groups.map((g) => (
              <li key={g.id}>
                <div>
                  <strong>{g.name}</strong>
                  {g.description && <span className="mkt-muted"> — {g.description}</span>}
                  <div className="mkt-group-meta">
                    <span className="mkt-badge">{g.memberCount} odbiorców</span>
                    {g.sources.length > 0 && <span className="mkt-muted">{g.sources.map((s) => SOURCE_LABEL[s]).join(', ')}</span>}
                    {g.city && <span className="mkt-muted">miasto: {g.city}</span>}
                    {g.requireEmailConsent && <span className="mkt-muted">zgoda e-mail</span>}
                    {g.requireSmsConsent && <span className="mkt-muted">zgoda SMS</span>}
                  </div>
                </div>
                <button type="button" className="mkt-icon-btn" title="Usuń grupę" disabled={busyId === g.id} onClick={() => remove(g)}>
                  <Icon name="trash" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

/* ============================ KAMPANIE ============================ */

export function AdminCampaignsView({ Icon }: { Icon: IconComponent }) {
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [groups, setGroups] = useState<TargetGroup[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);
  const [statsFor, setStatsFor] = useState<{ id: number; stats: CampaignStats } | null>(null);

  const empty = { name: '', channel: 'EMAIL' as Channel, subject: '', body: '', targetGroupId: '', dailyLimit: 200, scheduledAt: '' };
  const [form, setForm] = useState(empty);
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [c, g] = await Promise.all([
        apiFetch<Campaign[]>('/admin/campaigns'),
        apiFetch<TargetGroup[]>('/admin/target-groups'),
      ]);
      setCampaigns(c);
      setGroups(g);
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { load(); }, [load]);

  const create = async () => {
    if (!form.name.trim() || !form.body.trim() || !form.targetGroupId) {
      setError('Uzupełnij nazwę, treść i grupę docelową.');
      return;
    }
    if (form.channel === 'EMAIL' && !form.subject.trim()) {
      setError('Kampania e-mail wymaga tematu.');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      await apiFetch<Campaign>('/admin/campaigns', {
        method: 'POST',
        body: JSON.stringify({
          name: form.name.trim(),
          channel: form.channel,
          subject: form.channel === 'EMAIL' ? form.subject.trim() : null,
          body: form.body,
          targetGroupId: Number(form.targetGroupId),
          dailyLimit: Number(form.dailyLimit) || 1,
          scheduledAt: form.scheduledAt ? new Date(form.scheduledAt).toISOString() : null,
        }),
      });
      setForm(empty);
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const action = async (id: number, path: string) => {
    setBusyId(id);
    setError(null);
    try {
      await apiFetch(`/admin/campaigns/${id}/${path}`, { method: 'POST' });
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  const remove = async (id: number) => {
    setBusyId(id);
    try {
      await apiFetch(`/admin/campaigns/${id}`, { method: 'DELETE' });
      if (statsFor?.id === id) setStatsFor(null);
      await load();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  const showStats = async (id: number) => {
    try {
      const stats = await apiFetch<CampaignStats>(`/admin/campaigns/${id}/stats`);
      setStatsFor({ id, stats });
    } catch (err) {
      setError(errorMessage(err));
    }
  };

  return (
    <div className="mkt-grid-2">
      <div className="admin-card mkt-card">
        <div className="admin-card-head"><h2>Nowa kampania</h2></div>
        <div className="mkt-form">
          <label>Nazwa
            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="np. Newsletter lipiec" />
          </label>
          <div className="mkt-form-row">
            <label>Kanał
              <select value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value as Channel })}>
                <option value="EMAIL">E-mail</option>
                <option value="SMS">SMS</option>
              </select>
            </label>
            <label>Grupa docelowa
              <select value={form.targetGroupId} onChange={(e) => setForm({ ...form, targetGroupId: e.target.value })}>
                <option value="">— wybierz —</option>
                {groups.map((g) => (
                  <option key={g.id} value={g.id}>{g.name} ({g.memberCount})</option>
                ))}
              </select>
            </label>
          </div>
          {form.channel === 'EMAIL' && (
            <label>Temat
              <input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder="Temat wiadomości" />
            </label>
          )}
          <label>Treść <span className="mkt-muted">(użyj {'{{name}}'} dla personalizacji; stopka z rezygnacją dodawana automatycznie)</span>
            <textarea rows={5} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} placeholder="Cześć {{name}}, ..." />
          </label>
          <div className="mkt-form-row">
            <label>Dzienny limit
              <input type="number" min={1} value={form.dailyLimit} onChange={(e) => setForm({ ...form, dailyLimit: Number(e.target.value) })} />
            </label>
            <label>Zaplanuj na (opcjonalnie)
              <input type="datetime-local" value={form.scheduledAt} onChange={(e) => setForm({ ...form, scheduledAt: e.target.value })} />
            </label>
          </div>
          {error && <p className="mkt-error">{error}</p>}
          <button type="button" className="admin-btn approve" onClick={create} disabled={saving}>
            {saving ? 'Zapisywanie...' : 'Utwórz kampanię (robocza)'}
          </button>
        </div>
      </div>

      <div className="admin-card mkt-card">
        <div className="admin-card-head">
          <h2>Kampanie</h2>
          <span className="mkt-count">{campaigns.length}</span>
        </div>
        {loading ? (
          <p className="admin-empty">Ładowanie...</p>
        ) : campaigns.length === 0 ? (
          <p className="admin-empty">Brak kampanii.</p>
        ) : (
          <ul className="mkt-list">
            {campaigns.map((c) => (
              <li key={c.id} className="mkt-campaign">
                <div>
                  <strong>{c.name}</strong>
                  <span className={`mkt-status mkt-status-${c.status.toLowerCase()}`}>{CAMPAIGN_STATUS_LABEL[c.status]}</span>
                  <div className="mkt-group-meta">
                    <span className="mkt-chip">{c.channel === 'EMAIL' ? 'E-mail' : 'SMS'}</span>
                    <span className="mkt-muted">{c.sentCount}/{c.totalRecipients} wysłanych</span>
                    <span className="mkt-muted">limit/dzień: {c.dailyLimit}</span>
                  </div>
                  {statsFor?.id === c.id && (
                    <div className="mkt-stats">
                      w kolejce: {statsFor.stats.queued} · wysłane: {statsFor.stats.sent} · dostarczone: {statsFor.stats.delivered} · błędy: {statsFor.stats.failed}
                    </div>
                  )}
                </div>
                <div className="mkt-campaign-actions">
                  {(c.status === 'DRAFT' || c.status === 'PAUSED') && (
                    <button type="button" className="admin-btn approve" disabled={busyId === c.id} onClick={() => action(c.id, 'schedule')}>
                      Uruchom
                    </button>
                  )}
                  {(c.status === 'SENDING' || c.status === 'SCHEDULED') && (
                    <button type="button" className="admin-btn" disabled={busyId === c.id} onClick={() => action(c.id, 'pause')}>
                      Wstrzymaj
                    </button>
                  )}
                  <button type="button" className="mkt-icon-btn" title="Statystyki" onClick={() => showStats(c.id)}><Icon name="chart" /></button>
                  <button type="button" className="mkt-icon-btn" title="Usuń" disabled={busyId === c.id} onClick={() => remove(c.id)}><Icon name="trash" /></button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

/* ============================ KONFIGURACJA SMTP + SMS ============================ */

type SmtpConfig = {
  host: string | null;
  port: number | null;
  sslEnabled: boolean;
  username: string | null;
  fromName: string | null;
  contactFormRecipient: string | null;
  enabled: boolean;
  passwordSet: boolean;
};

type SmsConfig = {
  endpointUrl: string | null;
  creator: string | null;
  timeoutSeconds: number | null;
  enabled: boolean;
  apiKeySet: boolean;
};

export function AdminMailConfigView({ Icon }: { Icon: IconComponent }) {
  return (
    <div className="mkt-wrap">
      <SmtpCard Icon={Icon} />
      <SmsCard Icon={Icon} />
    </div>
  );
}

function SmtpCard({ Icon }: { Icon: IconComponent }) {
  const [config, setConfig] = useState<SmtpConfig | null>(null);
  const [password, setPassword] = useState('');
  const [saving, setSaving] = useState(false);
  const [note, setNote] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [testTo, setTestTo] = useState('');
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setConfig(await apiFetch<SmtpConfig>('/admin/mail-config/smtp'));
    } catch (err) {
      setError(errorMessage(err));
    }
  }, []);
  useEffect(() => { load(); }, [load]);

  if (!config) return <div className="admin-card mkt-card"><p className="admin-empty">Ładowanie konfiguracji SMTP...</p></div>;

  const set = (patch: Partial<SmtpConfig>) => setConfig({ ...config, ...patch });

  const save = async () => {
    setSaving(true);
    setNote(null);
    setError(null);
    try {
      const updated = await apiFetch<SmtpConfig>('/admin/mail-config/smtp', {
        method: 'PUT',
        body: JSON.stringify({
          host: config.host,
          port: config.port,
          sslEnabled: config.sslEnabled,
          username: config.username,
          fromName: config.fromName,
          contactFormRecipient: config.contactFormRecipient,
          enabled: config.enabled,
          password: password || null,
        }),
      });
      setConfig(updated);
      setPassword('');
      setNote('Zapisano ustawienia SMTP.');
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const test = async () => {
    if (!testTo.trim()) return;
    setTesting(true);
    setTestResult(null);
    try {
      const res = await apiFetch<{ ok: boolean; error: string | null }>('/admin/mail-config/smtp/test', {
        method: 'POST',
        body: JSON.stringify({ recipient: testTo.trim() }),
      });
      setTestResult(res.ok ? 'Wiadomość testowa wysłana.' : `Błąd: ${res.error}`);
    } catch (err) {
      setTestResult(`Błąd: ${errorMessage(err)}`);
    } finally {
      setTesting(false);
    }
  };

  return (
    <div className="admin-card mkt-card mkt-config">
      <div className="admin-card-head mkt-config-head">
        <span className="mkt-config-icon"><Icon name="mail" /></span>
        <h2>Konto e-mail (SMTP)</h2>
      </div>
      <div className="mkt-config-grid">
        <label>Adres odbiorcy wiadomości z formularza kontaktowego
          <input value={config.contactFormRecipient ?? ''} onChange={(e) => set({ contactFormRecipient: e.target.value })} placeholder="np. kontakt@twojadomena.pl" />
        </label>
        <label>Wyświetlana nazwa nadawcy
          <input value={config.fromName ?? ''} onChange={(e) => set({ fromName: e.target.value })} placeholder="np. Marketing" />
        </label>
        <label>Serwer SMTP
          <input value={config.host ?? ''} onChange={(e) => set({ host: e.target.value })} placeholder="np. smtp.twojadomena.pl" />
        </label>
        <label>Hasło do konta e-mail {config.passwordSet && <span className="mkt-badge-set"><Icon name="lock" /> ustawione</span>}
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="wpisz, aby zmienić" />
        </label>
        <label>Port SMTP (465 = SSL)
          <input type="number" value={config.port ?? ''} onChange={(e) => set({ port: e.target.value ? Number(e.target.value) : null })} placeholder="465" />
        </label>
        <label>Użyj SSL dla połączenia SMTP
          <select value={config.sslEnabled ? 'on' : 'off'} onChange={(e) => set({ sslEnabled: e.target.value === 'on' })}>
            <option value="on">Włączone</option>
            <option value="off">Wyłączone</option>
          </select>
        </label>
        <label>Login SMTP / adres nadawcy
          <input value={config.username ?? ''} onChange={(e) => set({ username: e.target.value })} placeholder="np. marketing@twojadomena.pl" />
        </label>
        <label>Wysyłka kampanii e-mail aktywna
          <select value={config.enabled ? 'on' : 'off'} onChange={(e) => set({ enabled: e.target.value === 'on' })}>
            <option value="off">Wyłączone (sandbox)</option>
            <option value="on">Włączone</option>
          </select>
        </label>
      </div>
      {error && <p className="mkt-error">{error}</p>}
      {note && <p className="mkt-ok">{note}</p>}
      <div className="mkt-config-save">
        <button type="button" className="admin-btn approve" onClick={save} disabled={saving}>
          {saving ? 'Zapisywanie...' : 'Zapisz ustawienia'}
        </button>
      </div>
      <div className="mkt-test">
        <h3>Test konfiguracji</h3>
        <div className="mkt-test-row">
          <input value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="Adres e-mail do testu" />
          <button type="button" className="admin-btn" onClick={test} disabled={testing || !testTo.trim()}>
            <Icon name="mail" /> {testing ? 'Wysyłanie...' : 'Wyślij (e-mail)'}
          </button>
        </div>
        {testResult && <p className={testResult.startsWith('Błąd') ? 'mkt-error' : 'mkt-ok'}>{testResult}</p>}
      </div>
    </div>
  );
}

function SmsCard({ Icon }: { Icon: IconComponent }) {
  const [config, setConfig] = useState<SmsConfig | null>(null);
  const [apiKey, setApiKey] = useState('');
  const [saving, setSaving] = useState(false);
  const [note, setNote] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [testTo, setTestTo] = useState('');
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setConfig(await apiFetch<SmsConfig>('/admin/mail-config/sms'));
    } catch (err) {
      setError(errorMessage(err));
    }
  }, []);
  useEffect(() => { load(); }, [load]);

  if (!config) return <div className="admin-card mkt-card"><p className="admin-empty">Ładowanie konfiguracji SMS...</p></div>;

  const set = (patch: Partial<SmsConfig>) => setConfig({ ...config, ...patch });

  const save = async () => {
    setSaving(true);
    setNote(null);
    setError(null);
    try {
      const updated = await apiFetch<SmsConfig>('/admin/mail-config/sms', {
        method: 'PUT',
        body: JSON.stringify({
          endpointUrl: config.endpointUrl,
          creator: config.creator,
          timeoutSeconds: config.timeoutSeconds,
          enabled: config.enabled,
          apiKey: apiKey || null,
        }),
      });
      setConfig(updated);
      setApiKey('');
      setNote('Zapisano ustawienia bramki SMS.');
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const test = async () => {
    if (!testTo.trim()) return;
    setTesting(true);
    setTestResult(null);
    try {
      const res = await apiFetch<{ ok: boolean; error: string | null }>('/admin/mail-config/sms/test', {
        method: 'POST',
        body: JSON.stringify({ recipient: testTo.trim() }),
      });
      setTestResult(res.ok ? 'SMS testowy wysłany.' : `Błąd: ${res.error}`);
    } catch (err) {
      setTestResult(`Błąd: ${errorMessage(err)}`);
    } finally {
      setTesting(false);
    }
  };

  return (
    <div className="admin-card mkt-card mkt-config">
      <div className="admin-card-head mkt-config-head">
        <span className="mkt-config-icon"><Icon name="message" /></span>
        <h2>Bramka SMS</h2>
      </div>
      <div className="mkt-config-grid">
        <label>Klucz API bramki SMS {config.apiKeySet && <span className="mkt-badge-set"><Icon name="lock" /> ustawione</span>}
          <input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="wpisz, aby zmienić" />
        </label>
        <label>Znacznik źródła wiadomości (pole creator, max 50 znaków)
          <input maxLength={50} value={config.creator ?? ''} onChange={(e) => set({ creator: e.target.value })} placeholder="np. Marketing" />
        </label>
        <label>Czy wysyłka SMS jest aktywna
          <select value={config.enabled ? 'on' : 'off'} onChange={(e) => set({ enabled: e.target.value === 'on' })}>
            <option value="off">Wyłączone (sandbox)</option>
            <option value="on">Włączone</option>
          </select>
        </label>
        <label>Pełny URL endpointu bramki SMS
          <input value={config.endpointUrl ?? ''} onChange={(e) => set({ endpointUrl: e.target.value })} placeholder="https://api.softspm.pl/send_sms_api.php" />
        </label>
        <label>Timeout żądania HTTP do bramki (s)
          <input type="number" value={config.timeoutSeconds ?? ''} onChange={(e) => set({ timeoutSeconds: e.target.value ? Number(e.target.value) : null })} placeholder="10" />
        </label>
      </div>
      {error && <p className="mkt-error">{error}</p>}
      {note && <p className="mkt-ok">{note}</p>}
      <div className="mkt-config-save">
        <button type="button" className="admin-btn approve" onClick={save} disabled={saving}>
          {saving ? 'Zapisywanie...' : 'Zapisz ustawienia'}
        </button>
      </div>
      <div className="mkt-test">
        <h3>Test konfiguracji</h3>
        <div className="mkt-test-row">
          <input value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="Numer telefonu do testu" />
          <button type="button" className="admin-btn" onClick={test} disabled={testing || !testTo.trim()}>
            <Icon name="message" /> {testing ? 'Wysyłanie...' : 'Wyślij (SMS)'}
          </button>
        </div>
        {testResult && <p className={testResult.startsWith('Błąd') ? 'mkt-error' : 'mkt-ok'}>{testResult}</p>}
      </div>
    </div>
  );
}