'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { TextFillForm } from './TextFillForm';

interface Client { id: string; name: string; email: string; }

interface PreparePanelProps {
  docId: string;
  clients: Client[];
  currentClientId: string;
  currentStatus: string;
}

export function PreparePanel({ docId, clients, currentClientId, currentStatus }: PreparePanelProps) {
  const router = useRouter();
  const [assignedClientId, setAssignedClientId] = useState(currentClientId);
  const [textFillData, setTextFillData] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);

  // Don't show the panel if already sent/signed
  const canPrepare = currentStatus === 'Draft';

  async function handlePrepare() {
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch(`/api/documents/${docId}/prepare`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ textFillData, assignedClientId }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Unknown error' }));
        setResult({ ok: false, message: err.error ?? 'Prepare failed' });
      } else {
        setResult({ ok: true, message: 'Document prepared successfully. Status updated to Sent.' });
        router.refresh(); // Update the page to reflect new status
      }
    } catch (e) {
      setResult({ ok: false, message: String(e) });
    } finally {
      setLoading(false);
    }
  }

  if (!canPrepare) {
    return (
      <div className="rounded-lg border border-gray-200 p-4 bg-gray-50 text-sm text-gray-500">
        Document status is <strong>{currentStatus}</strong> — preparation is only available for Draft documents.
      </div>
    );
  }

  return (
    <div className="rounded-lg border border-gray-200 p-4 space-y-4">
      <h2 className="font-semibold text-gray-900">Prepare Document</h2>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Assign to client</label>
        <select
          value={assignedClientId}
          onChange={e => setAssignedClientId(e.target.value)}
          className="w-full border rounded px-2 py-1.5 text-sm"
        >
          <option value="">— Select client —</option>
          {clients.map(c => (
            <option key={c.id} value={c.id}>{c.name} ({c.email})</option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Text fill fields</label>
        <TextFillForm onChange={setTextFillData} />
      </div>

      <button
        onClick={handlePrepare}
        disabled={loading || !assignedClientId}
        className="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
        type="button"
      >
        {loading ? 'Preparing...' : 'Prepare and Send'}
      </button>

      {result && (
        <p className={`text-sm ${result.ok ? 'text-green-600' : 'text-red-600'}`}>
          {result.message}
        </p>
      )}
    </div>
  );
}
