'use client';

import { useState, useTransition } from 'react';

interface LedgerEntry {
  delivery_id: number;
  delivery_date: string;
  quantity: number;
  unit: string;
  notes?: string | null;
  recorded_by?: { id: number; name: string };
}

interface LedgerResponse {
  context?: any;
  filters?: any;
  entries?: LedgerEntry[];
  totals?: any;
  insights?: any;
  diagnostics?: any;
  integration_hints?: any;
  error?: string;
  message?: string;
  issues?: string[];
  suggestions?: any;
}

const defaultPayload = {
  supplier_id: 4,
  commodity_code: 'RICE',
  school_code: 'SCH-0433',
  plan_period_id: 1,
};

export default function InsightsApiUiPage() {
  const [form, setForm] = useState({ ...defaultPayload });
  const [result, setResult] = useState<LedgerResponse | null>(null);
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  const handleChange = (key: string, value: string) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const handleSubmit = () => {
    setError(null);
    startTransition(async () => {
      try {
        const response = await fetch('/api/insights/supplier-ledger', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(form),
        });
        const data = (await response.json()) as LedgerResponse;
        if (!response.ok) {
          setError(data?.error || data?.message || `Request failed (${response.status})`);
        }
        setResult(data);
      } catch (err: any) {
        setError(err?.message || 'Request failed');
      }
    });
  };

  return (
    <div className="min-h-screen bg-slate-50 py-10">
      <div className="mx-auto max-w-3xl px-4">
        <div className="rounded-2xl bg-white p-6 shadow">
          <h1 className="text-2xl font-bold text-slate-900">Supplier Ledger API UI</h1>
          <p className="mt-1 text-sm text-slate-600">
            Calls the insights ledger endpoint via the server proxy using the configured API key.
          </p>

          <div className="mt-4 grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-xs font-semibold text-slate-500">Supplier ID</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={form.supplier_id ?? ''}
                onChange={(e) => handleChange('supplier_id', e.target.value)}
                placeholder="e.g., 4"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-500">Commodity Code</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={form.commodity_code ?? ''}
                onChange={(e) => handleChange('commodity_code', e.target.value)}
                placeholder="e.g., RICE"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-500">School Code</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={form.school_code ?? ''}
                onChange={(e) => handleChange('school_code', e.target.value)}
                placeholder="e.g., SCH-0433"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-500">Plan Period ID (optional)</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={form.plan_period_id ?? ''}
                onChange={(e) => handleChange('plan_period_id', e.target.value)}
                placeholder="e.g., 1"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-500">Date From (YYYY-MM-DD)</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={(form as any).date_from ?? ''}
                onChange={(e) => handleChange('date_from', e.target.value)}
                placeholder="optional"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-500">Date To (YYYY-MM-DD)</label>
              <input
                className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                value={(form as any).date_to ?? ''}
                onChange={(e) => handleChange('date_to', e.target.value)}
                placeholder="optional"
              />
            </div>
          </div>

          <div className="mt-4 flex items-center gap-3">
            <button
              onClick={handleSubmit}
              disabled={pending}
              className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-emerald-700 disabled:opacity-60"
            >
              {pending ? 'Running…' : 'Run Ledger Query'}
            </button>
            <button
              onClick={() => setForm({ ...defaultPayload })}
              disabled={pending}
              className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:opacity-60"
            >
              Reset to defaults
            </button>
          </div>

          {error && (
            <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
              {error}
            </div>
          )}

          {result && (
            <div className="mt-6 space-y-3 text-sm">
              <Section title="Context" data={result.context} />
              <Section title="Filters" data={result.filters} />
              <Section title="Totals" data={result.totals} />
              <Section title="Insights" data={result.insights} />
              <Section title="Entries" data={result.entries} />
              <Section title="Diagnostics" data={result.diagnostics} />
              <Section title="Integration Hints" data={result.integration_hints} />
              {result.issues && result.issues.length > 0 && (
                <Section title="Issues" data={result.issues} />
              )}
              {result.suggestions && <Section title="Suggestions" data={result.suggestions} />}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Section({ title, data }: { title: string; data: any }) {
  if (!data || (Array.isArray(data) && data.length === 0)) return null;
  return (
    <div className="rounded-xl border border-slate-200 bg-slate-50 p-3">
      <div className="text-xs font-semibold uppercase text-slate-500">{title}</div>
      <pre className="mt-2 overflow-x-auto whitespace-pre-wrap text-xs text-slate-800">{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}