'use client';

import React, { useEffect, useMemo, useState } from 'react';
import useContractManagement from '../hooks/useContractManagement';

type Props = {
  refreshKey?: number;
};

type ContractTemplate = {
  id: string;
  name: string;
  version: number;
  status: 'draft' | 'published' | 'archived' | string;
  updatedAt?: string;
};

function StatusBadge({ status }: { status: string }) {
  const map: Record<string, string> = {
    draft: 'bg-gray-100 text-gray-800 border border-gray-300',
    published: 'bg-green-100 text-green-800 border border-green-300',
    archived: 'bg-yellow-100 text-yellow-800 border border-yellow-300',
  };
  const cls = map[status] || 'bg-blue-100 text-blue-800 border border-blue-300';
  return <span className={`px-2 py-0.5 rounded text-xs font-semibold ${cls}`}>{status}</span>;
}

export default function ContractTemplateList({ refreshKey = 0 }: Props) {
  const [items, setItems] = useState<ContractTemplate[]>([]);
  const [loading, setLoading] = useState(false);
  const [q, setQ] = useState('');

  const {
    listTemplates,
    openPreviewInNewTab,
    generatePdf,
    downloadPdf,
    updateTemplateState,
    downloadBlobFile,
  } = useContractManagement();

  const filtered = useMemo(() => {
    const term = q.trim().toLowerCase();
    if (!term) return items;
    return items.filter((i) => i.name.toLowerCase().includes(term) || String(i.version).includes(term) || i.status.toLowerCase().includes(term));
  }, [items, q]);

  const load = async () => {
    setLoading(true);
    try {
      const data = await listTemplates();
      const mapped: ContractTemplate[] = data.map((x: any) => ({
        id: x.id ?? x._id ?? x.uuid,
        name: x.name ?? 'Untitled',
        version: Number(x.version ?? 1),
        status: (x.state === 'active') ? 'published' : 'draft',
        updatedAt: x.updatedAt ?? x.modifiedAt ?? x.updated_at,
      }));
      setItems(mapped);
    } catch {
      setItems((prev) => prev.length ? prev : [
        { id: 'ex1', name: 'Sample Contract A', version: 1, status: 'draft', updatedAt: new Date().toISOString() },
        { id: 'ex2', name: 'NDA Template', version: 3, status: 'published', updatedAt: new Date().toISOString() },
      ]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshKey]);

  const onToggleState = async (id: string, current: string) => {
    const target = current === 'published' ? 'inactive' : 'active';
    try {
      const updated = await updateTemplateState(id, target as 'active' | 'inactive');
      setItems((prev) => prev.map((i) => i.id === id ? { ...i, status: updated.state === 'active' ? 'published' : 'draft' } : i));
    } catch {}
  };

  const onPreview = (id: string) => openPreviewInNewTab(id);

  const onGenPdf = async (id: string) => {
    try {
      const blob = await generatePdf(id, { preview: true });
      downloadBlobFile(blob, `${id}-preview.pdf`);
    } catch {}
  };

  const onDownloadPdf = async (id: string) => {
    try {
      const blob = await downloadPdf(id);
      downloadBlobFile(blob, `${id}.pdf`);
    } catch {}
  };

  return (
    <div className="space-y-4">
      <div className="flex gap-2 items-center">
        <input
          placeholder="Search templates…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-indigo-500/50 shadow"
        />
        <button
          onClick={load}
          disabled={loading}
          className="rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-4 py-2 text-sm font-medium shadow disabled:opacity-60"
        >
          {loading ? 'Loading…' : 'Refresh'}
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filtered.map((c) => (
          <div key={c.id} className="rounded-xl border border-gray-100 bg-white shadow-sm p-4 flex flex-col gap-2 hover:shadow-md transition">
            <div className="flex items-center gap-2">
              <p className="font-semibold text-lg text-gray-900 truncate">{c.name}</p>
              <StatusBadge status={c.status} />
            </div>
            <p className="text-xs text-gray-500">Version {c.version}{c.updatedAt ? ` • Updated ${new Date(c.updatedAt).toLocaleString()}` : ''}</p>
            <div className="flex flex-wrap gap-2 mt-2">
              <button onClick={() => onPreview(c.id)} className="px-3 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-200 transition">Preview</button>
              <button onClick={() => onGenPdf(c.id)} className="px-3 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-200 transition">PDF</button>
              <button onClick={() => onDownloadPdf(c.id)} className="px-3 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-200 transition">Download</button>
              <button onClick={() => onToggleState(c.id, c.status)} className={`px-3 py-1 text-xs rounded-lg font-semibold transition
                ${c.status === 'published'
                  ? 'bg-red-100 hover:bg-red-200 text-red-700 border border-red-200'
                  : 'bg-indigo-600 hover:bg-indigo-500 text-white border border-indigo-600'}`}>
                {c.status === 'published' ? 'Deactivate' : 'Activate'}
              </button>
            </div>
          </div>
        ))}
        {!filtered.length && (
          <div className="col-span-full py-8 text-center text-sm text-gray-500">No contracts found.</div>
        )}
      </div>
    </div>
  );
}