'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
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 { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { ListStatusBadge } from '@/components/school/list-data-card';
import { useToast } from '@/components/school/toast-context';
import {
  Banknote,
  CreditCard,
  ArrowRightLeft,
  CircleDollarSign,
  PlusCircle,
  Trash2,
  Receipt,
  User,
  CalendarDays,
  GraduationCap,
  CheckCircle2,
  Clock,
  AlertCircle,
  XCircle,
} from 'lucide-react';

// ─── Types ────────────────────────────────────────────────────

type FeeItem = { id: string; feeType: string; label: string; amount: number };

type PaymentRecord = {
  id: string;
  amount: string | number;
  paymentMethod: string;
  providerRef?: string | null;
  notes?: string | null;
  paidAt: string;
  status: string;
};

type InvoiceDetail = {
  id: string;
  title: string;
  invoiceType: string;
  billingPeriod?: string | null;
  amount: string | number;
  totalAmount: string | number;
  paidAmount: string | number;
  status: string;
  dueDate: string;
  paidAt?: string | null;
  notes?: string | null;
  student?: {
    firstName: string;
    lastName: string;
    classroom?: { name: string } | null;
    parents?: Array<{
      isPrimary: boolean;
      parent: { user: { fullName: string; phone?: string | null } };
    }>;
  };
  feeItems?: FeeItem[];
  payments?: PaymentRecord[];
};

// ─── Helpers ─────────────────────────────────────────────────

function fmt(v: number) {
  return v.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

const PM_LABELS: Record<string, string> = {
  CASH: 'Nakit',
  BANK_TRANSFER: 'Banka Havalesi',
  CREDIT_CARD: 'Kredi Kartı',
  OTHER: 'Diğer',
};

const FEE_LABELS: Record<string, string> = {
  MONTHLY_TUITION: 'Aylık Aidat',
  TRANSPORT: 'Servis',
  FOOD: 'Yemek',
  STATIONERY: 'Kırtasiye',
  TRIP: 'Gezi',
  OTHER: 'Diğer',
};

function PaymentMethodIcon({ method }: { method: string }) {
  if (method === 'CASH') return <Banknote className="size-4 text-emerald-600" />;
  if (method === 'CREDIT_CARD') return <CreditCard className="size-4 text-violet-600" />;
  if (method === 'BANK_TRANSFER') return <ArrowRightLeft className="size-4 text-blue-600" />;
  return <CircleDollarSign className="size-4 text-slate-500" />;
}

function InvoiceStatusBadge({ status }: { status: string }) {
  if (status === 'PAID') return <ListStatusBadge tone="success"><CheckCircle2 className="mr-1 size-3.5" />Ödendi</ListStatusBadge>;
  if (status === 'OVERDUE') return <ListStatusBadge tone="warning"><AlertCircle className="mr-1 size-3.5" />Vadesi Geçti</ListStatusBadge>;
  if (status === 'CANCELLED') return <ListStatusBadge tone="neutral"><XCircle className="mr-1 size-3.5" />İptal</ListStatusBadge>;
  return <ListStatusBadge tone="primary"><Clock className="mr-1 size-3.5" />Bekliyor</ListStatusBadge>;
}

// ─── Main Page ────────────────────────────────────────────────

export default function InvoiceDetailPage() {
  const params = useParams();
  const id = String(params.id ?? '');
  const router = useRouter();
  const { toast } = useToast();

  const [inv, setInv] = useState<InvoiceDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  // Edit form state
  const [editAmount, setEditAmount] = useState('');
  const [editDueDate, setEditDueDate] = useState('');
  const [editDescription, setEditDescription] = useState('');
  const [editStatus, setEditStatus] = useState('');

  // Payment dialog
  const [payOpen, setPayOpen] = useState(false);
  const [payForm, setPayForm] = useState({ amount: '', paymentMethod: 'CASH', providerRef: '', notes: '' });
  const [paySaving, setPaySaving] = useState(false);

  // Fee item dialog
  const [feeOpen, setFeeOpen] = useState(false);
  const [feeForm, setFeeForm] = useState({ feeType: 'OTHER', label: '', amount: '' });
  const [feeSaving, setFeeSaving] = useState(false);

  const loadInvoice = async () => {
    setLoading(true);
    const res = await apiFetchJson<InvoiceDetail>(`/v1/admin/invoices/${id}`);
    if (res.data) {
      const d = res.data as InvoiceDetail;
      setInv(d);
      const a = parseFloat(String(d.totalAmount));
      setEditAmount(String(a));
      setEditDueDate(d.dueDate?.slice(0, 10) ?? '');
      setEditDescription(d.notes ?? d.title ?? '');
      setEditStatus(d.status);
    }
    setLoading(false);
  };

  useEffect(() => { loadInvoice(); }, [id]);

  // Payment dialog open → set default amount to remaining
  useEffect(() => {
    if (payOpen && inv) {
      const total = parseFloat(String(inv.totalAmount));
      const paid = parseFloat(String(inv.paidAmount));
      const remaining = Math.max(0, total - paid);
      setPayForm((f) => ({ ...f, amount: remaining.toFixed(2) }));
    }
  }, [payOpen, inv]);

  const saveInvoice = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    const res = await apiFetchJson(`/v1/admin/invoices/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ amount: parseFloat(editAmount), dueDate: editDueDate, description: editDescription || undefined, status: editStatus }),
    });
    setSaving(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else { toast({ title: 'Fatura güncellendi' }); loadInvoice(); }
  };

  const recordPayment = async () => {
    setPaySaving(true);
    const res = await apiFetchJson(`/v1/admin/invoices/${id}/payments`, {
      method: 'POST',
      body: JSON.stringify({
        amount: parseFloat(payForm.amount),
        paymentMethod: payForm.paymentMethod,
        providerRef: payForm.providerRef || undefined,
        notes: payForm.notes || undefined,
      }),
    });
    setPaySaving(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else {
      toast({ title: 'Ödeme kaydedildi' });
      setPayOpen(false);
      loadInvoice();
    }
  };

  const addFeeItem = async () => {
    setFeeSaving(true);
    const res = await apiFetchJson(`/v1/admin/invoices/${id}/fee-items`, {
      method: 'POST',
      body: JSON.stringify({ feeType: feeForm.feeType, label: feeForm.label, amount: parseFloat(feeForm.amount) }),
    });
    setFeeSaving(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else {
      toast({ title: 'Kalem eklendi' });
      setFeeOpen(false);
      setFeeForm({ feeType: 'OTHER', label: '', amount: '' });
      loadInvoice();
    }
  };

  const removeFeeItem = async (itemId: string) => {
    const res = await apiFetchJson(`/v1/admin/invoices/${id}/fee-items/${itemId}`, { method: 'DELETE' });
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else { toast({ title: 'Kalem silindi' }); loadInvoice(); }
  };

  if (loading || !inv) {
    return <PageHeader title="Fatura" description="Yükleniyor…" backHref="/school/finance" />;
  }

  const totalAmount = parseFloat(String(inv.totalAmount));
  const paidAmount = parseFloat(String(inv.paidAmount));
  const remaining = Math.max(0, totalAmount - paidAmount);
  const collectionRate = totalAmount > 0 ? Math.round((paidAmount / totalAmount) * 100) : 0;
  const student = inv.student;
  const primaryParent = student?.parents?.find((p) => p.isPrimary);

  return (
    <div className="space-y-6">
      <PageHeader
        title={inv.title}
        description={student ? `${student.firstName} ${student.lastName}` : 'Fatura detayı'}
        backHref="/school/finance"
      />

      {/* ─── Status + Summary Row ────────────────────────────── */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {/* Status */}
        <div className="flex flex-col justify-between rounded-2xl bg-white p-5 ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
          <p className="text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-zinc-400">Durum</p>
          <div className="mt-3">
            <InvoiceStatusBadge status={inv.status} />
            {inv.billingPeriod && (
              <p className="mt-2 text-xs text-slate-400 dark:text-zinc-500">Dönem: {inv.billingPeriod}</p>
            )}
          </div>
        </div>

        {/* Total */}
        <div className="rounded-2xl bg-white p-5 ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
          <p className="text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-zinc-400">Toplam Tutar</p>
          <p className="mt-2 text-2xl font-bold tabular-nums text-slate-900 dark:text-white">{fmt(totalAmount)} ₺</p>
        </div>

        {/* Paid */}
        <div className="rounded-2xl bg-emerald-50 p-5 ring-1 ring-emerald-500/15 dark:bg-emerald-900/10 dark:ring-emerald-500/20">
          <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600 dark:text-emerald-400">Ödenen</p>
          <p className="mt-2 text-2xl font-bold tabular-nums text-emerald-600 dark:text-emerald-400">{fmt(paidAmount)} ₺</p>
          <p className="mt-1 text-xs text-emerald-500">%{collectionRate} tahsil edildi</p>
        </div>

        {/* Remaining */}
        <div className={`rounded-2xl p-5 ring-1 ${remaining > 0 ? 'bg-amber-50 ring-amber-500/15 dark:bg-amber-900/10 dark:ring-amber-500/20' : 'bg-slate-50 ring-slate-900/8 dark:bg-zinc-800 dark:ring-white/8'}`}>
          <p className={`text-xs font-semibold uppercase tracking-widest ${remaining > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-slate-500 dark:text-zinc-400'}`}>Kalan</p>
          <p className={`mt-2 text-2xl font-bold tabular-nums ${remaining > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-slate-400 dark:text-zinc-500'}`}>{fmt(remaining)} ₺</p>
          {inv.dueDate && <p className="mt-1 text-xs text-slate-400 dark:text-zinc-500">Son: {inv.dueDate.slice(0, 10)}</p>}
        </div>
      </div>

      {/* Progress bar */}
      {totalAmount > 0 && (
        <div className="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-zinc-800">
          <div
            className={`h-full rounded-full transition-all duration-700 ${collectionRate >= 100 ? 'bg-emerald-500' : collectionRate > 0 ? 'bg-amber-500' : 'bg-slate-300'}`}
            style={{ width: `${Math.min(collectionRate, 100)}%` }}
          />
        </div>
      )}

      <div className="grid gap-6 lg:grid-cols-3">
        {/* ─── Left Column ──────────────────────────────────── */}
        <div className="space-y-6 lg:col-span-2">

          {/* Fee Items */}
          {inv.feeItems && inv.feeItems.length > 0 && (
            <FormCard title="Ücret Kalemleri">
              <div className="space-y-2">
                {inv.feeItems.map((item) => (
                  <div key={item.id} className="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2.5 dark:bg-zinc-800">
                    <div>
                      <p className="text-sm font-medium text-slate-900 dark:text-white">{item.label}</p>
                      <p className="text-xs text-slate-400 dark:text-zinc-500">{FEE_LABELS[item.feeType] ?? item.feeType}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="tabular-nums text-sm font-semibold text-slate-700 dark:text-zinc-300">{fmt(Number(item.amount))} ₺</span>
                      {inv.status !== 'PAID' && inv.status !== 'CANCELLED' && (
                        <button
                          type="button"
                          onClick={() => removeFeeItem(item.id)}
                          className="flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                        >
                          <Trash2 className="size-3.5" />
                        </button>
                      )}
                    </div>
                  </div>
                ))}
                <div className="flex justify-between border-t border-slate-100 pt-2 dark:border-zinc-700">
                  <span className="text-sm font-bold text-slate-900 dark:text-white">Toplam</span>
                  <span className="text-sm font-bold tabular-nums text-slate-900 dark:text-white">{fmt(totalAmount)} ₺</span>
                </div>
              </div>
              {inv.status !== 'PAID' && inv.status !== 'CANCELLED' && (
                <div className="mt-4">
                  <button
                    type="button"
                    onClick={() => setFeeOpen(true)}
                    className="inline-flex items-center gap-1.5 text-xs font-medium text-brand-600 hover:underline dark:text-brand-400"
                  >
                    <PlusCircle className="size-3.5" /> Kalem ekle
                  </button>
                </div>
              )}
            </FormCard>
          )}

          {/* Edit Form */}
          <form onSubmit={saveInvoice}>
            <FormCard title="Fatura Bilgileri">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-1.5">
                  <Label>Tutar (₺)</Label>
                  <Input type="number" min={0} step="0.01" value={editAmount} onChange={(e) => setEditAmount(e.target.value)} required />
                </div>
                <div className="space-y-1.5">
                  <Label>Vade Tarihi</Label>
                  <Input type="date" value={editDueDate} onChange={(e) => setEditDueDate(e.target.value)} required />
                </div>
                <div className="space-y-1.5">
                  <Label>Durum</Label>
                  <SelectNative value={editStatus} onChange={(e) => setEditStatus(e.target.value)}>
                    <option value="PENDING">Bekliyor</option>
                    <option value="PAID">Ödendi</option>
                    <option value="OVERDUE">Vadesi geçti</option>
                    <option value="CANCELLED">İptal</option>
                  </SelectNative>
                </div>
                <div className="space-y-1.5">
                  <Label>Başlık / Açıklama</Label>
                  <Input value={editDescription} onChange={(e) => setEditDescription(e.target.value)} />
                </div>
              </div>
              <div className="mt-5 flex gap-2">
                <Button type="button" variant="secondary" onClick={() => router.push('/school/finance')}>Geri</Button>
                <Button type="submit" disabled={saving}>{saving ? 'Kaydediliyor…' : 'Kaydet'}</Button>
                {inv.status !== 'PAID' && inv.status !== 'CANCELLED' && (
                  <Button type="button" onClick={() => setPayOpen(true)} className="ml-auto gap-1.5 bg-emerald-600 hover:bg-emerald-700">
                    <Receipt className="size-4" /> Ödeme Kaydet
                  </Button>
                )}
              </div>
            </FormCard>
          </form>

          {/* Payment History */}
          {inv.payments && inv.payments.length > 0 && (
            <FormCard title="Ödeme Geçmişi">
              <div className="space-y-2">
                {inv.payments.map((p) => (
                  <div key={p.id} className="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2.5 dark:bg-zinc-800">
                    <div className="flex items-center gap-2.5">
                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm dark:bg-zinc-700">
                        <PaymentMethodIcon method={p.paymentMethod} />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-900 dark:text-white">{PM_LABELS[p.paymentMethod] ?? p.paymentMethod}</p>
                        <p className="text-xs text-slate-400 dark:text-zinc-500">
                          {new Date(p.paidAt).toLocaleDateString('tr-TR', { day: '2-digit', month: 'long', year: 'numeric' })}
                          {p.providerRef && ` · Ref: ${p.providerRef}`}
                        </p>
                        {p.notes && <p className="text-xs text-slate-400 dark:text-zinc-500">{p.notes}</p>}
                      </div>
                    </div>
                    <span className="tabular-nums text-sm font-bold text-emerald-600 dark:text-emerald-400">+{fmt(Number(p.amount))} ₺</span>
                  </div>
                ))}
              </div>
            </FormCard>
          )}
        </div>

        {/* ─── Right Column ─────────────────────────────────── */}
        <div className="space-y-4">
          {/* Student & Parent Info */}
          {student && (
            <div className="rounded-2xl bg-white p-5 ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
              <h3 className="mb-4 flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
                <GraduationCap className="size-4 text-slate-400 dark:text-zinc-500" />
                Öğrenci
              </h3>
              <p className="text-base font-semibold text-slate-900 dark:text-white">{student.firstName} {student.lastName}</p>
              {student.classroom && (
                <p className="mt-0.5 text-sm text-slate-500 dark:text-zinc-400">{student.classroom.name}</p>
              )}
              {primaryParent && (
                <div className="mt-4 border-t border-slate-100 pt-4 dark:border-zinc-800">
                  <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-slate-400 dark:text-zinc-500">
                    <User className="size-3.5" /> Birincil Veli
                  </p>
                  <p className="text-sm font-medium text-slate-900 dark:text-white">{primaryParent.parent.user.fullName}</p>
                  {primaryParent.parent.user.phone && (
                    <p className="text-sm text-slate-500 dark:text-zinc-400">{primaryParent.parent.user.phone}</p>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Invoice meta */}
          <div className="rounded-2xl bg-white p-5 ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
            <h3 className="mb-4 flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
              <CalendarDays className="size-4 text-slate-400 dark:text-zinc-500" />
              Fatura Bilgisi
            </h3>
            <dl className="space-y-2 text-sm">
              <div className="flex justify-between">
                <dt className="text-slate-500 dark:text-zinc-400">Tip</dt>
                <dd className="font-medium text-slate-900 dark:text-white">{inv.invoiceType === 'MONTHLY_TUITION' ? 'Aylık Aidat' : 'Ek Ücret'}</dd>
              </div>
              {inv.billingPeriod && (
                <div className="flex justify-between">
                  <dt className="text-slate-500 dark:text-zinc-400">Dönem</dt>
                  <dd className="font-medium text-slate-900 dark:text-white">{inv.billingPeriod}</dd>
                </div>
              )}
              <div className="flex justify-between">
                <dt className="text-slate-500 dark:text-zinc-400">Oluşturulma</dt>
                <dd className="font-medium text-slate-900 dark:text-white">—</dd>
              </div>
              {inv.paidAt && (
                <div className="flex justify-between">
                  <dt className="text-slate-500 dark:text-zinc-400">Ödeme tarihi</dt>
                  <dd className="font-medium text-emerald-600 dark:text-emerald-400">{inv.paidAt.slice(0, 10)}</dd>
                </div>
              )}
              {inv.notes && (
                <div className="pt-2">
                  <dt className="mb-1 text-slate-500 dark:text-zinc-400">Not</dt>
                  <dd className="rounded-lg bg-slate-50 p-2 text-xs text-slate-700 dark:bg-zinc-800 dark:text-zinc-300">{inv.notes}</dd>
                </div>
              )}
            </dl>
          </div>

          {/* Quick Actions */}
          {!inv.feeItems?.length && inv.status !== 'PAID' && (
            <button
              type="button"
              onClick={() => setFeeOpen(true)}
              className="w-full rounded-xl border-2 border-dashed border-slate-200 py-3 text-sm font-medium text-slate-500 transition-colors hover:border-brand-500/40 hover:text-brand-600 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-brand-500/30 dark:hover:text-brand-400"
            >
              <PlusCircle className="mx-auto mb-1 size-4" />
              Ücret kalemi ekle
            </button>
          )}
        </div>
      </div>

      {/* ─── Payment Dialog ──────────────────────────────────── */}
      <Dialog open={payOpen} onOpenChange={setPayOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Ödeme Kaydet</DialogTitle>
          </DialogHeader>
          <div className="space-y-1 rounded-xl bg-slate-50 p-3 text-sm dark:bg-zinc-800">
            <p className="font-medium text-slate-900 dark:text-white">{inv.title}</p>
            <p className="text-slate-500 dark:text-zinc-400">
              Kalan: <span className="font-semibold text-amber-600 dark:text-amber-400">{fmt(remaining)} ₺</span>
            </p>
          </div>
          <div className="space-y-4">
            <div className="space-y-1.5">
              <Label>Ödeme Tutarı (₺)</Label>
              <Input type="number" min={0.01} step="0.01" max={remaining} value={payForm.amount} onChange={(e) => setPayForm({ ...payForm, amount: e.target.value })} />
            </div>
            <div className="space-y-1.5">
              <Label>Ödeme Yöntemi</Label>
              <SelectNative value={payForm.paymentMethod} onChange={(e) => setPayForm({ ...payForm, paymentMethod: e.target.value })}>
                <option value="CASH">Nakit</option>
                <option value="BANK_TRANSFER">Banka Havalesi</option>
                <option value="CREDIT_CARD">Kredi Kartı</option>
                <option value="OTHER">Diğer</option>
              </SelectNative>
            </div>
            <div className="space-y-1.5">
              <Label>Referans No (opsiyonel)</Label>
              <Input placeholder="Makbuz no, dekont no…" value={payForm.providerRef} onChange={(e) => setPayForm({ ...payForm, providerRef: e.target.value })} />
            </div>
            <div className="space-y-1.5">
              <Label>Not (opsiyonel)</Label>
              <Input placeholder="Ödeme notu…" value={payForm.notes} onChange={(e) => setPayForm({ ...payForm, notes: e.target.value })} />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setPayOpen(false)}>İptal</Button>
            <Button type="button" disabled={paySaving || !payForm.amount || parseFloat(payForm.amount) <= 0} onClick={recordPayment}>
              {paySaving ? 'Kaydediliyor…' : 'Ödemeyi Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ─── Fee Item Dialog ─────────────────────────────────── */}
      <Dialog open={feeOpen} onOpenChange={setFeeOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Ücret Kalemi Ekle</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-1.5">
              <Label>Kalem Tipi</Label>
              <SelectNative value={feeForm.feeType} onChange={(e) => setFeeForm({ ...feeForm, feeType: e.target.value })}>
                <option value="MONTHLY_TUITION">Aylık Aidat</option>
                <option value="TRANSPORT">Servis</option>
                <option value="FOOD">Yemek</option>
                <option value="STATIONERY">Kırtasiye</option>
                <option value="TRIP">Gezi</option>
                <option value="OTHER">Diğer</option>
              </SelectNative>
            </div>
            <div className="space-y-1.5">
              <Label>Açıklama</Label>
              <Input placeholder="Örn: Nisan Servisi" value={feeForm.label} onChange={(e) => setFeeForm({ ...feeForm, label: e.target.value })} />
            </div>
            <div className="space-y-1.5">
              <Label>Tutar (₺)</Label>
              <Input type="number" min={0} step="0.01" value={feeForm.amount} onChange={(e) => setFeeForm({ ...feeForm, amount: e.target.value })} />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setFeeOpen(false)}>İptal</Button>
            <Button type="button" disabled={feeSaving || !feeForm.label || !feeForm.amount} onClick={addFeeItem}>
              {feeSaving ? 'Ekleniyor…' : 'Ekle'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}