"use client";
// components/GroupReportActions.tsx
// View PDF + Mail PDF buttons for the group report page header.

import { useState } from "react";

interface Props {
  groupId: string;
  groupName: string;
}

export default function GroupReportActions({ groupId, groupName }: Props) {
  const [pdfLoading, setPdfLoading] = useState(false);
  const [mailLoading, setMailLoading] = useState(false);
  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);

  async function handleViewPdf() {
    setPdfLoading(true);
    setResult(null);
    try {
      const res = await fetch(`/api/group-report/${groupId}/pdf`);
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: "Unknown error" }));
        setResult({ ok: false, message: err.error });
        return;
      }
      const blob = await res.blob();
      const disposition = res.headers.get("Content-Disposition") ?? "";
      const nameMatch = disposition.match(/filename="?([^"]+)"?/);
      const filename = nameMatch ? nameMatch[1] : `${groupName}_group_report.pdf`;
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      setResult({ ok: false, message: e instanceof Error ? e.message : String(e) });
    } finally {
      setPdfLoading(false);
    }
  }

  async function handleMailPdf() {
    const email = prompt("Enter email address for this group report:");
    if (!email) return;
    if (!confirm(`Send group PDF for "${groupName}" to ${email}?`)) return;
    setMailLoading(true);
    setResult(null);
    try {
      const res = await fetch(`/api/group-report/${groupId}/email`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ to: email }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        setResult({ ok: true, message: `Sent to ${data.sent_to}` });
      } else {
        setResult({ ok: false, message: data.error ?? "Send failed" });
      }
    } catch (e) {
      setResult({ ok: false, message: e instanceof Error ? e.message : String(e) });
    } finally {
      setMailLoading(false);
    }
  }

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <button
        onClick={handleViewPdf}
        disabled={pdfLoading}
        className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold hover:bg-surface-warm transition-colors disabled:opacity-50"
      >
        {pdfLoading ? (
          <>
            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
            </svg>
            Generating…
          </>
        ) : (
          <>
            <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clipRule="evenodd" />
            </svg>
            View PDF
          </>
        )}
      </button>

      <button
        onClick={handleMailPdf}
        disabled={mailLoading}
        className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold hover:bg-surface-warm transition-colors disabled:opacity-50"
      >
        {mailLoading ? (
          <>
            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
            </svg>
            Sending…
          </>
        ) : (
          <>
            <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
            </svg>
            Mail PDF
          </>
        )}
      </button>

      {result && (
        <span className={`text-sm font-medium ${result.ok ? "text-green-600" : "text-red-500"}`}>
          {result.ok ? "✓ " : "✗ "}{result.message}
        </span>
      )}
    </div>
  );
}