import { useCallback, useEffect, useMemo, useState } from 'react';
import { EmbeddableShell } from '../components/shared/EmbeddableShell';
import { NavIcon } from '../components/NavIcon';
import { ButtonPrimary, ButtonSecondary, LinkButtonSecondary } from '../components/shared/buttons';
import { ApiErrorPanel } from '../components/shared/ApiErrorPanel';
import { getSikshyaApi, SIKSHYA_ENDPOINTS } from '../api';
import { appViewHref } from '../lib/appUrl';
import { useAdminRouting } from '../lib/adminRouting';
import { useSikshyaDialog } from '../components/shared/SikshyaDialogContext';
import type { SikshyaReactConfig } from '../types';
import type { EmailTemplateApi } from '../types/emailTemplate';
import { ToggleSwitch } from '../components/email/EmailTemplateForms';
import { TableSkeleton } from '../components/shared/Skeleton';
import { ListEmptyState } from '../components/shared/list';
import { RowActionsMenu, type RowActionItem } from '../components/shared/list/RowActionsMenu';
import { __ } from '../lib/i18n';

function categoryStyle(cat: string): string {
  const c = cat.toLowerCase();
  if (c.includes('enroll')) {
    return 'bg-sky-100 text-sky-900 dark:bg-sky-950/50 dark:text-sky-200';
  }
  if (c.includes('complet')) {
    return 'bg-emerald-100 text-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200';
  }
  if (c.includes('cert')) {
    return 'bg-violet-100 text-violet-900 dark:bg-violet-950/50 dark:text-violet-200';
  }
  if (c.includes('auto') || c.includes('account')) {
    return 'bg-amber-100 text-amber-950 dark:bg-amber-950/40 dark:text-amber-200';
  }
  if (c.includes('commerce') || c.includes('payment') || c.includes('order')) {
    return 'bg-teal-100 text-teal-900 dark:bg-teal-950/50 dark:text-teal-200';
  }
  return 'bg-slate-200/90 text-slate-800 dark:bg-slate-800 dark:text-slate-200';
}

/**
 * Transactional email templates — list + bulk actions (matches Courses-style admin patterns).
 */
export function EmailTemplatesListPage(props: { config: SikshyaReactConfig; title: string; embedded?: boolean }) {
  const { config, title, embedded } = props;
  const dialog = useSikshyaDialog();
  const { navigateHref } = useAdminRouting();
  const [rows, setRows] = useState<EmailTemplateApi[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<unknown>(null);
  const [actionBusy, setActionBusy] = useState<string | null>(null);
  const [selected, setSelected] = useState<Set<string>>(() => new Set());
  const [bulkBusy, setBulkBusy] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await getSikshyaApi().get<{ templates: EmailTemplateApi[] }>(SIKSHYA_ENDPOINTS.admin.emailTemplates);
      setRows(Array.isArray(res.templates) ? res.templates : []);
      setSelected(new Set());
    } catch (e) {
      setError(e);
      setRows([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const allIds = useMemo(() => rows.map((r) => r.id), [rows]);
  const allSelected = rows.length > 0 && selected.size === rows.length;
  const someSelected = selected.size > 0;

  const toggleSelectAll = () => {
    if (allSelected) {
      setSelected(new Set());
    } else {
      setSelected(new Set(allIds));
    }
  };

  const toggleRow = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const patchTemplate = async (id: string, body: Record<string, unknown>) => {
    setActionBusy(id);
    try {
      const updated = await getSikshyaApi().patch<EmailTemplateApi>(SIKSHYA_ENDPOINTS.admin.emailTemplate(id), body);
      setRows((prev) => prev.map((t) => (t.id === id ? { ...t, ...updated } : t)));
      return updated;
    } finally {
      setActionBusy(null);
    }
  };

  const onToggleEnabled = async (row: EmailTemplateApi) => {
    if (row.locked) {
      return;
    }
    try {
      await patchTemplate(row.id, { enabled: !row.enabled });
    } catch {
      /* ignore */
    }
  };

  const runBulk = async (action: 'enable' | 'disable' | 'delete') => {
    const ids = Array.from(selected);
    if (ids.length === 0) {
      return;
    }
    if (action === 'delete') {
      const ok = await dialog.confirm({
        title: `Delete ${ids.length} template(s)?`,
        message:
          __('Only custom templates are removed. System templates cannot be deleted and will be skipped if selected.', 'sikshya'),
        confirmLabel: __('Delete', 'sikshya'),
        variant: 'danger',
      });
      if (!ok) {
        return;
      }
    }
    setBulkBusy(true);
    try {
      await getSikshyaApi().post(SIKSHYA_ENDPOINTS.admin.emailTemplateBulk, { action, ids });
      await load();
    } catch (e) {
      setError(e);
    } finally {
      setBulkBusy(false);
    }
  };

  const editHref = (id: string) => appViewHref(config, 'email-template-edit', { template_id: id });
  const newHref = appViewHref(config, 'email-template-edit', { template_id: 'new' });
  const addonsHref = appViewHref(config, 'addons');

  return (
    <EmbeddableShell
      embedded={embedded}
      config={config}
      title={title}
      subtitle={__('Enable and edit transactional messages — including drip unlock templates. Disable one template only disables that mail. Addresses, SMTP, global HTML, the LMS send-email switch, and certificate email delivery are centralized under Email → Delivery.', 'sikshya')}
      pageActions={
        <div className="flex flex-wrap items-center gap-2">
          <LinkButtonSecondary href={appViewHref(config, 'email-hub', { tab: 'delivery' })}>{__('Email delivery', 'sikshya')}</LinkButtonSecondary>
          <ButtonPrimary type="button" disabled={loading} onClick={() => void load()}>
            Refresh
          </ButtonPrimary>
          <ButtonPrimary type="button" onClick={() => navigateHref(newHref)}>
            Add template
          </ButtonPrimary>
        </div>
      }
    >
      {error ? (
        <div className="mb-4">
          <ApiErrorPanel error={error} title={__('Could not load templates', 'sikshya')} onRetry={() => void load()} />
        </div>
      ) : null}

      {someSelected ? (
        <div className="mb-4 flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-900/50">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-200">{selected.size} selected</span>
          <ButtonSecondary disabled={bulkBusy} onClick={() => void runBulk('enable')}>
            {__('Enable', 'sikshya')}
          </ButtonSecondary>
          <ButtonSecondary disabled={bulkBusy} onClick={() => void runBulk('disable')}>
            {__('Disable', 'sikshya')}
          </ButtonSecondary>
          <ButtonSecondary
            disabled={bulkBusy}
            onClick={() => void runBulk('delete')}
            className="border-rose-200 text-rose-700 hover:bg-rose-50 dark:border-rose-900/50 dark:text-rose-200 dark:hover:bg-rose-950/40"
          >
            {__('Delete custom', 'sikshya')}
          </ButtonSecondary>
        </div>
      ) : null}

      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950/40">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1000px] table-fixed border-collapse text-left text-sm">
            <thead>
              <tr className="border-b border-slate-200 bg-slate-50/95 dark:border-slate-800 dark:bg-slate-900/60">
                <th className="w-10 px-3 py-3.5">
                  <input
                    type="checkbox"
                    className="rounded border-slate-300"
                    checked={allSelected}
                    onChange={toggleSelectAll}
                    disabled={loading || rows.length === 0}
                    aria-label={__('Select all templates', 'sikshya')}
                  />
                </th>
                <th className="px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Template
                </th>
                <th className="px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Event
                </th>
                <th className="px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Subject
                </th>
                <th className="px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Category
                </th>
                <th className="max-w-[200px] px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Send to
                </th>
                <th className="px-3 py-3.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  Status
                </th>
                <th className="w-12 px-3 py-3.5 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                  <span className="sr-only">{__('Actions', 'sikshya')}</span>
                </th>
              </tr>
            </thead>
            {loading ? (
              <TableSkeleton columns={8} rows={10} />
            ) : (
              <tbody>
                {rows.map((row, idx) => (
                  <tr
                    key={row.id}
                    className={`border-b border-slate-100 transition hover:bg-slate-50/90 dark:border-slate-800/80 dark:hover:bg-slate-900/40 ${
                      idx % 2 === 0 ? __('bg-white dark:bg-transparent', 'sikshya') : __('bg-slate-50/40 dark:bg-slate-950/30', 'sikshya')
                    } ${row.locked ? 'opacity-[0.88]' : ''}`}
                  >
                    <td className="px-3 py-3 align-middle">
                      <input
                        type="checkbox"
                        className="rounded border-slate-300"
                        checked={selected.has(row.id)}
                        onChange={() => toggleRow(row.id)}
                        aria-label={`Select ${row.name}`}
                      />
                    </td>
                    <td className="px-3 py-3 align-top">
                      <div className="flex items-start gap-2">
                        <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300">
                          <NavIcon name="plusDocument" className="h-4 w-4" />
                        </span>
                        <div className="min-w-0">
                          <a
                            href={editHref(row.id)}
                            onClick={(e) => {
                              e.preventDefault();
                              navigateHref(editHref(row.id));
                            }}
                            className="font-semibold text-brand-600 hover:underline dark:text-brand-400"
                          >
                            {row.name}
                          </a>
                          <div className="mt-1 flex flex-wrap items-center gap-1">
                            <span
                              className={`inline-flex rounded-md px-2 py-0.5 text-xs font-bold uppercase tracking-wide ${
                                row.template_type === 'system'
                                  ? 'bg-violet-100 text-violet-900 dark:bg-violet-950/50 dark:text-violet-200'
                                  : 'bg-slate-200/90 text-slate-700 dark:bg-slate-800 dark:text-slate-200'
                              }`}
                            >
                              {row.template_type === 'system' ? __('System', 'sikshya') : __('Custom', 'sikshya')}
                            </span>
                            {row.locked ? (
                              <span className="inline-flex rounded-md bg-amber-100 px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-amber-950 dark:bg-amber-950/50 dark:text-amber-100">
                                Add-on off
                              </span>
                            ) : null}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="max-w-[160px] px-3 py-3 align-top">
                      <span className="inline-flex max-w-full items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-medium text-violet-900 dark:bg-violet-950/40 dark:text-violet-200">
                        <span aria-hidden>⚡</span>
                        <span className="truncate font-mono">{row.event}</span>
                      </span>
                    </td>
                    <td className="max-w-[220px] px-3 py-3 align-top text-xs text-slate-700 dark:text-slate-300">
                      <span className="line-clamp-2">{row.subject}</span>
                    </td>
                    <td className="px-3 py-3 align-top">
                      <span
                        className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold capitalize ${categoryStyle(
                          row.category
                        )}`}
                      >
                        <NavIcon name="course" className="h-3.5 w-3.5 opacity-70" />
                        {row.category}
                      </span>
                    </td>
                    <td className="max-w-[200px] px-3 py-3 align-top">
                      <code className="line-clamp-2 break-all text-xs text-slate-600 dark:text-slate-400">
                        {row.recipient_to || '{{student_email}}'}
                      </code>
                    </td>
                    <td className="px-3 py-3 align-middle">
                      <ToggleSwitch
                        checked={row.enabled}
                        disabled={actionBusy === row.id || !!row.locked}
                        onChange={() => void onToggleEnabled(row)}
                        label="Enabled"
                      />
                    </td>
                    <td className="w-12 px-3 py-3 text-right align-middle">
                      {(() => {
                        const items: RowActionItem[] = [
                          {
                            key: 'edit',
                            label: row.locked ? __('View (locked)', 'sikshya') : __('Edit', 'sikshya'),
                            onClick: () => navigateHref(editHref(row.id)),
                          },
                        ];
                        if (row.locked) {
                          items.push({
                            key: 'addons',
                            label: __('Unlock via add-ons', 'sikshya'),
                            href: addonsHref,
                          });
                        }
                        return <RowActionsMenu items={items} ariaLabel={__('Template actions', 'sikshya')} />;
                      })()}
                    </td>
                  </tr>
                ))}
              </tbody>
            )}
          </table>
        </div>
        {!loading && rows.length === 0 ? (
          <ListEmptyState
            compact
            title={__('No templates yet', 'sikshya')}
            description={__(
              'Email templates are registered by Sikshya and its add-ons. If you expected one to appear here, check that the relevant add-on is active.',
              'sikshya'
            )}
          />
        ) : null}
      </div>
    </EmbeddableShell>
  );
}