import { apiFetch } from '../../_lib/api';
import { redirect } from 'next/navigation';
import { getToken } from '../../_lib/api';
import { DraftCard } from './DraftCard';
import Link from 'next/link';

type DraftType = 'EVENT' | 'SEVA_TASK' | 'FAQ_ITEM';

interface Draft {
  id: string;
  type: DraftType;
  status: string;
  proposedJson: Record<string, any>;
  confidence: number | null;
  createdAt: string;
  sourceMessage: {
    id: string;
    content: string;
    senderName: string | null;
    createdAt: string;
  };
}

const TABS: { label: string; value: DraftType | 'ALL' }[] = [
  { label: 'All', value: 'ALL' },
  { label: 'Events', value: 'EVENT' },
  { label: 'Seva Tasks', value: 'SEVA_TASK' },
  { label: 'FAQs', value: 'FAQ_ITEM' },
];

async function fetchDrafts(type?: DraftType): Promise<Draft[]> {
  const query = new URLSearchParams({ status: 'PENDING_REVIEW' });
  if (type) query.set('type', type);
  const res = await apiFetch(`/admin/drafts?${query}`);
  if (!res.ok) return [];
  return (await res.json()) as Draft[];
}

export default async function DraftsPage({
  searchParams,
}: {
  searchParams: Promise<{ type?: string }>;
}) {
  const token = await getToken();
  if (!token) redirect('/login');

  const { type } = await searchParams;
  const activeType = (type as DraftType) ?? undefined;
  const drafts = await fetchDrafts(activeType);

  return (
    <div className="p-6 max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-gray-900">AI Content Drafts</h1>
          <p className="text-sm text-gray-500 mt-0.5">
            Events, seva tasks, and FAQs auto-detected from WhatsApp messages
          </p>
        </div>
        <Link href="/admin" className="text-sm text-indigo-600 hover:underline">← Admin</Link>
      </div>

      {/* Type filter tabs */}
      <div className="flex gap-1 border-b border-gray-200">
        {TABS.map((tab) => {
          const href = tab.value === 'ALL' ? '/admin/drafts' : `/admin/drafts?type=${tab.value}`;
          const isActive = (tab.value === 'ALL' && !activeType) || tab.value === activeType;
          return (
            <Link
              key={tab.value}
              href={href}
              className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                isActive
                  ? 'border-indigo-600 text-indigo-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab.label}
            </Link>
          );
        })}
      </div>

      {drafts.length === 0 ? (
        <div className="text-center py-20 text-gray-400">
          <p className="text-sm font-medium">No pending drafts</p>
          <p className="text-xs mt-1">
            Drafts appear here when the AI detects events, volunteer asks, or FAQ patterns in group messages.
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {drafts.map((d) => (
            <DraftCard key={d.id} draft={d} />
          ))}
        </div>
      )}
    </div>
  );
}