'use client';

import { useState } from 'react';
import { Eye, Send } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { apiFetch } from '@/lib/api/client';

interface PreviewResponse {
  data: { subject: string; html: string };
}

/**
 * Live preview of the branded transactional email shell plus a
 * "send a test" affordance. Both use the current port's branding so
 * admins can sanity-check uploads + colour + header/footer HTML
 * without firing one of the real flows.
 */
export function EmailPreviewCard() {
  const [html, setHtml] = useState<string | null>(null);
  const [subject, setSubject] = useState<string | null>(null);
  const [loadingPreview, setLoadingPreview] = useState(false);
  const [testEmail, setTestEmail] = useState('');
  const [sending, setSending] = useState(false);

  async function refreshPreview() {
    setLoadingPreview(true);
    try {
      const res = await apiFetch<PreviewResponse>('/api/v1/admin/branding/email-preview');
      setSubject(res.data.subject);
      setHtml(res.data.html);
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : 'Preview failed');
    } finally {
      setLoadingPreview(false);
    }
  }

  async function sendTest() {
    if (!testEmail) return;
    setSending(true);
    try {
      await apiFetch('/api/v1/admin/branding/email-preview', {
        method: 'POST',
        body: { recipient: testEmail },
      });
      toast.success(`Test email queued to ${testEmail}`);
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : 'Send failed');
    } finally {
      setSending(false);
    }
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle>Preview & test</CardTitle>
            <CardDescription>
              Renders a sample transactional email with the current port&apos;s branding. Save
              changes first, then refresh the preview to see them.
            </CardDescription>
          </div>
          <Button variant="outline" size="sm" onClick={refreshPreview} disabled={loadingPreview}>
            <Eye className="mr-1.5 h-4 w-4" />
            {loadingPreview ? 'Loading…' : html ? 'Refresh preview' : 'Show preview'}
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {html ? (
          <div className="space-y-2">
            <div className="text-xs text-muted-foreground">
              Subject: <span className="font-medium text-foreground">{subject}</span>
            </div>
            <div className="rounded-md border bg-white">
              {/* Sandboxed so the rendered HTML can't execute scripts or
                  steal the admin's session. Same-origin would let it call
                  /api/* with the admin's cookies. */}
              <iframe
                title="Email preview"
                srcDoc={html}
                sandbox=""
                className="h-[640px] w-full rounded-md"
              />
            </div>
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">
            Click <span className="font-medium">Show preview</span> to render a sample email.
          </p>
        )}
        <div className="space-y-2 border-t pt-4">
          <Label htmlFor="test-email-input">Send a test</Label>
          <div className="flex flex-wrap items-center gap-2">
            <Input
              id="test-email-input"
              type="email"
              value={testEmail}
              onChange={(e) => setTestEmail(e.target.value)}
              placeholder="you@example.com"
              className="flex-1 min-w-[240px]"
            />
            <Button onClick={sendTest} disabled={sending || !testEmail}>
              <Send className="mr-1.5 h-4 w-4" />
              {sending ? 'Sending…' : 'Send test email'}
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Sends the same sample email to the address you enter. Useful for checking how it lands
            in Gmail, Outlook, Apple Mail, etc.
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
