'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { FormCard } from '@/components/school/form-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { SelectNative } from '@/components/ui/select-native';
import { useToast } from '@/components/school/toast-context';

type StudentOpt = { id: string; firstName: string; lastName: string };

export default function NewInvoicePage() {
  const router = useRouter();
  const { toast } = useToast();
  const [students, setStudents] = useState<StudentOpt[]>([]);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({ studentId: '', amount: '', dueDate: '', description: '' });

  useEffect(() => {
    (async () => {
      const res = await apiFetchJson<StudentOpt[]>('/v1/admin/students?limit=500');
      setStudents(Array.isArray(res.data) ? res.data : []);
    })();
  }, []);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    const res = await apiFetchJson('/v1/admin/invoices', {
      method: 'POST',
      body: JSON.stringify({
        studentId: form.studentId,
        amount: parseFloat(form.amount),
        dueDate: form.dueDate,
        description: form.description || undefined,
      }),
    });
    setSaving(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else {
      toast({ title: 'Fatura oluşturuldu' });
      const inv = res.data as { id?: string };
      router.push(inv?.id ? `/school/finance/invoices/${inv.id}` : '/school/finance');
    }
  }

  return (
    <div className="space-y-6">
      <PageHeader title="Yeni fatura" description="Tek öğrenci için ödeme kalemi." backHref="/school/finance" />
      <form onSubmit={submit}>
        <FormCard title="Fatura bilgileri">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2 sm:col-span-2">
              <Label>Öğrenci</Label>
              <SelectNative value={form.studentId} onChange={(e) => setForm({ ...form, studentId: e.target.value })} required>
                <option value="">Seçin</option>
                {students.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.firstName} {s.lastName}
                  </option>
                ))}
              </SelectNative>
            </div>
            <div className="space-y-2">
              <Label>Tutar (₺)</Label>
              <Input type="number" min={0} step="0.01" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} required />
            </div>
            <div className="space-y-2">
              <Label>Vade</Label>
              <Input type="date" value={form.dueDate} onChange={(e) => setForm({ ...form, dueDate: e.target.value })} required />
            </div>
            <div className="space-y-2 sm:col-span-2">
              <Label>Açıklama</Label>
              <Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
            </div>
          </div>
          <div className="mt-6 flex gap-2">
            <Button type="button" variant="secondary" onClick={() => router.push('/school/finance')}>
              İptal
            </Button>
            <Button type="submit" disabled={saving}>
              {saving ? 'Kaydediliyor…' : 'Oluştur'}
            </Button>
          </div>
        </FormCard>
      </form>
    </div>
  );
}