pn-new-crm/src/components/admin/email-templates-admin.tsx

'use client';

import { useEffect, useMemo, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { RotateCcw, Save } from 'lucide-react';

import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/api/client';

interface TemplateRow {
  key: string;
  label: string;
  description: string;
  mergeTokens: string[];
  defaultSubject: string;
  subjectOverride: string | null;
  effectiveSubject: string;
}

export function EmailTemplatesAdmin() {
  const qc = useQueryClient();
  const { data, isLoading, error } = useQuery({
    queryKey: ['admin-email-templates'],
    queryFn: () => apiFetch<{ data: TemplateRow[] }>('/api/v1/admin/email-templates'),
  });

  const [drafts, setDrafts] = useState<Record<string, string>>({});
  const [savingKey, setSavingKey] = useState<string | null>(null);
  const [message, setMessage] = useState<{ key: string; kind: 'ok' | 'err'; text: string } | null>(
    null,
  );

  const rows = useMemo(() => data?.data ?? [], [data]);

  useEffect(() => {
    // Hydrate drafts from server values whenever the source-of-truth list refreshes.
    const next: Record<string, string> = {};
    for (const row of rows) {
      next[row.key] = row.subjectOverride ?? row.defaultSubject;
    }
    setDrafts(next);
  }, [rows]);

  async function save(row: TemplateRow, mode: 'save' | 'reset') {
    setSavingKey(row.key);
    setMessage(null);
    try {
      const subject = mode === 'reset' ? null : (drafts[row.key] ?? '');
      await apiFetch('/api/v1/admin/email-templates', {
        method: 'PUT',
        body: { key: row.key, subject },
      });
      await qc.invalidateQueries({ queryKey: ['admin-email-templates'] });
      setMessage({
        key: row.key,
        kind: 'ok',
        text: mode === 'reset' ? 'Reset to default' : 'Saved',
      });
    } catch (err) {
      setMessage({
        key: row.key,
        kind: 'err',
        text: err instanceof Error ? err.message : 'Failed',
      });
    } finally {
      setSavingKey(null);
    }
  }

  return (
    <div>
      <PageHeader
        title="Email templates"
        description="Customize the subject line of transactional emails per port. Body editing is the next iteration; for now the layout and HTML stay locked to the default template."
      />

      <div className="mt-6 space-y-4">
        {isLoading ? (
          <p className="text-sm text-muted-foreground py-6">Loading…</p>
        ) : error ? (
          <p className="text-sm text-red-600 py-6">
            Failed to load templates: {error instanceof Error ? error.message : 'unknown error'}
          </p>
        ) : (
          rows.map((row) => {
            const draft = drafts[row.key] ?? row.defaultSubject;
            const dirty =
              draft !== (row.subjectOverride ?? row.defaultSubject) ||
              (row.subjectOverride !== null && draft === row.defaultSubject);
            const overridden = row.subjectOverride !== null;
            return (
              <Card key={row.key}>
                <CardHeader className="pb-2">
                  <div className="flex items-center gap-2 flex-wrap">
                    <CardTitle className="text-base font-medium">{row.label}</CardTitle>
                    {overridden ? (
                      <Badge className="bg-blue-100 text-blue-800">Overridden</Badge>
                    ) : (
                      <Badge variant="secondary">Default</Badge>
                    )}
                  </div>
                  <CardDescription>{row.description}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div>
                    <label className="text-xs uppercase tracking-wide text-muted-foreground">
                      Subject
                    </label>
                    <Input
                      value={draft}
                      onChange={(e) =>
                        setDrafts((prev) => ({ ...prev, [row.key]: e.target.value }))
                      }
                      className="mt-1 font-mono text-sm"
                    />
                  </div>
                  <div className="text-xs text-muted-foreground">
                    Default: <code className="font-mono">{row.defaultSubject}</code>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    Available tokens:{' '}
                    {row.mergeTokens.map((t) => (
                      <code key={t} className="mr-1 font-mono">{`{{${t}}}`}</code>
                    ))}
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      onClick={() => save(row, 'save')}
                      disabled={savingKey === row.key || !dirty}
                    >
                      <Save className="h-3.5 w-3.5 mr-1.5" /> Save
                    </Button>
                    {overridden ? (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => save(row, 'reset')}
                        disabled={savingKey === row.key}
                      >
                        <RotateCcw className="h-3.5 w-3.5 mr-1.5" /> Reset to default
                      </Button>
                    ) : null}
                    {message?.key === row.key ? (
                      <span
                        className={
                          message.kind === 'ok' ? 'text-sm text-green-600' : 'text-sm text-red-600'
                        }
                      >
                        {message.text}
                      </span>
                    ) : null}
                  </div>
                </CardContent>
              </Card>
            );
          })
        )}
      </div>
    </div>
  );
}