import KaydetButonlari from '@/Components/KaydetButonlari';
import MoneyInput from '@/Components/MoneyInput';
import RichTextEditor from '@/Components/RichTextEditor';
import Select from '@/Components/Select';
import Toggle from '@/Components/Toggle';
import AppLayout from '@/Layouts/AppLayout';
import { paraFormat } from '@/lib/format';
import { useParaBirimleri } from '@/lib/paraBirimi';
import Link from '@/Components/Link';
import { Head, useForm } from '@inertiajs/react';
import { ArrowLeft, Wallet } from 'lucide-react';
import { FormEvent } from 'react';

interface Kasa {
    id: number;
    ad: string;
    tip: string;
    para_birimi: string;
    acilis_bakiyesi: number | string;
    aciklama?: string;
    aktif: boolean;
    bakiye?: number;
}

const BOS_VERILER = {
    ad:              '',
    tip:             'Kasa',
    para_birimi:     'TRY',
    acilis_bakiyesi: 0 as number | string,
    aciklama:        '',
    aktif:           true,
};

export default function KasaForm({ kasa, kasa_tipleri }: { kasa: Kasa | null; kasa_tipleri: string[] }) {
    const yeni = !kasa;
    const { data, setData, post, put, transform, processing, errors } = useForm({
        ad:              kasa?.ad ?? '',
        tip:             kasa?.tip ?? 'Kasa',
        para_birimi:     kasa?.para_birimi ?? 'TRY',
        acilis_bakiyesi: kasa?.acilis_bakiyesi ?? 0,
        aciklama:        kasa?.aciklama ?? '',
        aktif:           kasa?.aktif ?? true,
    });

    const { options: pbOptions } = useParaBirimleri();

    const submit = (e: FormEvent, yeniDevam = false) => {
        e.preventDefault();
        transform((d) => ({ ...d, devam_yenisi: yeniDevam }));
        const opts = {
            preserveScroll: true,
            onSuccess: () => {
                if (yeniDevam) setData(BOS_VERILER);
            },
        };
        if (yeni) post('/kasalar', opts);
        else put(`/kasalar/${kasa!.id}`, opts);
    };

    return (
        <AppLayout title={yeni ? 'Yeni Kasa' : `Kasa Düzenle: ${kasa?.ad}`}>
            <Head title={yeni ? 'Yeni Kasa' : 'Kasa Düzenle'} />

            <Link href="/kasalar/" className="mb-4 inline-flex items-center gap-1 text-sm font-medium text-slate-600 hover:text-slate-900">
                <ArrowLeft className="h-4 w-4" />
                Kasalar listesine dön
            </Link>

            <form onSubmit={(e) => submit(e, false)} className="space-y-4">
                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div className="mb-4 flex items-center gap-2">
                        <Wallet className="h-5 w-5 text-slate-700" />
                        <h3 className="text-base font-semibold text-slate-900">Kasa Bilgileri</h3>
                    </div>

                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div className="md:col-span-2">
                            <label className="mb-1 block text-sm font-medium text-slate-700">
                                Ad <span className="text-rose-600">*</span>
                            </label>
                            <input
                                type="text"
                                value={data.ad}
                                onChange={(e) => setData('ad', e.target.value)}
                                required
                                placeholder="Örn: Merkez Kasa, Garanti Bankası, İyzico POS"
                                className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                            />
                            {errors.ad && <p className="mt-1 text-xs text-rose-600">{errors.ad}</p>}
                        </div>

                        <div>
                            <label className="mb-1 block text-sm font-medium text-slate-700">Tip</label>
                            <Select
                                value={data.tip}
                                onChange={(v) => setData('tip', String(v))}
                                options={kasa_tipleri.map((t) => ({ value: t, label: t }))}
                                placeholder="Kasa tipi seçiniz..."
                                hizliEkleUrl="/tanimlamalar/tip/kasa-tipi"
                                hizliEkleBaslik="Kasa Tipi"
                                hizliEkleDeger="ad"
                            />
                        </div>

                        <div>
                            <label className="mb-1 block text-sm font-medium text-slate-700">Para Birimi</label>
                            <Select
                                value={data.para_birimi}
                                onChange={(v) => setData('para_birimi', String(v))}
                                options={pbOptions}
                                placeholder="Para birimi seçiniz..."
                                hizliEkleModul="parabirimi" hizliEkleDeger="kod"
                            />
                        </div>

                        <div>
                            <label className="mb-1 block text-sm font-medium text-slate-700">Açılış Bakiyesi</label>
                            <MoneyInput
                                value={data.acilis_bakiyesi}
                                onChange={(v) => setData('acilis_bakiyesi', v)}
                                currency={data.para_birimi}
                                placeholder="0,00"
                            />
                        </div>

                        <div className="md:col-span-2">
                            <label className="mb-1 block text-sm font-medium text-slate-700">Açıklama</label>
                            <RichTextEditor
                                value={data.aciklama}
                                onChange={(html) => setData('aciklama', html)}
                                placeholder="Kasa ile ilgili detaylar — banka hesap no, IBAN, POS sağlayıcı vb..."
                                minHeight={120}
                            />
                        </div>
                    </div>
                </div>

                {!yeni && kasa?.bakiye !== undefined && (
                    <div className="rounded-xl border border-slate-200 bg-slate-50 p-6">
                        <div className="text-sm font-medium text-slate-600">Güncel Bakiye</div>
                        <div className={`mt-1 text-2xl font-bold ${(kasa.bakiye ?? 0) >= 0 ? 'text-emerald-700' : 'text-rose-700'}`}>
                            {paraFormat(kasa.bakiye ?? 0, kasa.para_birimi)}
                        </div>
                        <div className="text-xs text-slate-500">
                            Açılış + Toplam Giriş - Toplam Çıkış
                        </div>
                    </div>
                )}

                <KaydetButonlari
                    iptalUrl="/kasalar"
                    processing={processing}
                    onKaydetVeYeni={() => submit({ preventDefault() {} } as FormEvent, true)}
                />
            </form>
        </AppLayout>
    );
}
