'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';

type PlanEdit = {
  id: string;
  code: string;
  name: string;
  description: string | null;
  price: string;
  currency: string;
  interval: string;
  trialDays: number | null;
  status: string;
  displayOrder: number;
  highlighted: boolean;
};

export function AdminPlanForm({ plan }: { plan?: PlanEdit }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [name, setName] = useState(plan?.name ?? '');
  const [code, setCode] = useState(plan?.code ?? '');
  const [description, setDescription] = useState(plan?.description ?? '');
  const [price, setPrice] = useState(plan ? String(Number(plan.price)) : '');
  const [interval, setInterval] = useState(plan?.interval ?? 'MONTHLY');
  const [trialDays, setTrialDays] = useState(plan?.trialDays != null ? String(plan.trialDays) : '');

  async function submit() {
    setBusy(true); setError(null);
    try {
      const res = await fetch('/api/admin/plans', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'upsert',
          id: plan?.id,
          code: code.trim().toLowerCase(),
          name: name.trim(),
          description: description.trim() || undefined,
          price: Number(price),
          currency: 'TZS',
          interval,
          trialDays: trialDays === '' ? null : Number(trialDays),
          status: plan?.status ?? 'ACTIVE',
          displayOrder: plan?.displayOrder ?? 0,
          highlighted: plan?.highlighted ?? false,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Unable to save plan.');
      setOpen(false);
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <Button size="sm" variant={plan ? 'outline' : 'default'} onClick={() => setOpen(true)}>
        {plan ? 'Edit' : 'Create Plan'}
      </Button>
      {open && (
        <div className="fixed inset-0 z-50 flex items-end justify-center bg-navy/45 sm:items-center sm:p-4" role="dialog" aria-modal>
          <div className="max-h-[90dvh] w-full max-w-lg overflow-y-auto rounded-t-[var(--radius-lg)] border border-border bg-card p-4 text-navy sm:rounded-[var(--radius-lg)]">
            <h2 className="text-lg font-extrabold">{plan ? 'Edit plan' : 'Create plan'}</h2>
            <p className="mt-1 text-xs text-muted-foreground">Price changes apply to new payments — existing subscriptions keep historical terms.</p>
            <div className="mt-3 space-y-3">
              <label className="block text-sm font-semibold">Name<input className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={name} onChange={e => setName(e.target.value)} /></label>
              {!plan && <label className="block text-sm font-semibold">Code<input className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={code} onChange={e => setCode(e.target.value)} placeholder="professional" /></label>}
              <label className="block text-sm font-semibold">Description<textarea className="mt-1 min-h-16 w-full rounded-[var(--radius-md)] border border-border px-3 py-2" value={description} onChange={e => setDescription(e.target.value)} /></label>
              <label className="block text-sm font-semibold">Price (TZS)<input inputMode="decimal" className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={price} onChange={e => setPrice(e.target.value)} /></label>
              <label className="block text-sm font-semibold">Interval
                <select className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={interval} onChange={e => setInterval(e.target.value)}>
                  <option value="MONTHLY">Monthly</option>
                  <option value="YEARLY">Yearly</option>
                </select>
              </label>
              <label className="block text-sm font-semibold">Trial days (optional)<input inputMode="numeric" className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={trialDays} onChange={e => setTrialDays(e.target.value)} /></label>
            </div>
            {error && <p className="mt-2 text-sm text-danger">{error}</p>}
            <div className="mt-4 flex gap-2">
              <Button variant="outline" className="flex-1" onClick={() => setOpen(false)}>Cancel</Button>
              <Button className="flex-1" loading={busy} disabled={!name || !price || (!plan && !code)} onClick={() => void submit()}>Save</Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}