'use client';

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

export function AdminExtendSubscription({
  subscriptionId,
  businessName,
  currentEnd,
}: {
  subscriptionId: string;
  businessName: string;
  currentEnd: string | null;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [newEndsAt, setNewEndsAt] = useState(() => {
    const d = currentEnd ? new Date(currentEnd) : new Date();
    d.setMonth(d.getMonth() + 1);
    return d.toISOString().slice(0, 10);
  });
  const [reason, setReason] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit() {
    setBusy(true); setError(null);
    try {
      const res = await fetch('/api/admin/subscriptions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subscriptionId,
          newEndsAt: new Date(`${newEndsAt}T23:59:59.000Z`).toISOString(),
          reason,
          confirm: true,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Unable to extend.');
      setOpen(false);
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Extend Subscription</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="w-full max-w-md 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">Extend Subscription</h2>
            <p className="mt-2 text-sm text-muted-foreground">Business: {businessName}</p>
            <p className="text-sm text-muted-foreground">Current end: {currentEnd ? new Date(currentEnd).toLocaleDateString('en-GB') : '—'}</p>
            <label className="mt-3 block text-sm font-semibold">
              New end date
              <input type="date" className="mt-1 h-11 w-full rounded-[var(--radius-md)] border border-border px-3" value={newEndsAt} onChange={e => setNewEndsAt(e.target.value)} />
            </label>
            <label className="mt-3 block text-sm font-semibold">
              Reason
              <textarea className="mt-1 min-h-20 w-full rounded-[var(--radius-md)] border border-border px-3 py-2" value={reason} onChange={e => setReason(e.target.value)} />
            </label>
            {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={reason.trim().length < 5} onClick={() => void submit()}>
                Confirm extension
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}