import { useState } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Button } from '@/Components/ui/button';
import { ExternalLink, ArrowLeft, Wallet, FileText, CheckCircle } from 'lucide-react';
import { StatusBadge } from '@/Components/shared/StatusBadge';
import { formatDate } from '@/lib/date';
import { Badge } from '@/Components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/Components/ui/dialog';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { toast } from 'sonner';
import { Can } from '@/Components/Permission/Can';

const getStatusBadgeVariant = (status: string) => {
    switch (status) {
        case 'pending': return 'warning';
        case 'partially_paid': return 'info';
        case 'paid': return 'success';
        case 'cancelled': return 'destructive';
        default: return 'neutral';
    }
};

const getStatusLabel = (status: string) => {
    switch (status) {
        case 'pending': return '待付款';
        case 'partially_paid': return '部分付款';
        case 'paid': return '已結清';
        case 'cancelled': return '已作廢';
        default: return status;
    }
};

export default function AccountPayableShow({ payable }: any) {
    const [invoiceDialogOpen, setInvoiceDialogOpen] = useState(false);
    const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);

    const invoiceForm = useForm({
        invoice_number: payable.invoice_number || '',
        invoice_date: payable.invoice_date || '',
    });

    const paymentForm = useForm({
        payment_method: payable.payment_method || 'bank_transfer',
        paid_at: payable.paid_at ? payable.paid_at.split('T')[0] : new Date().toISOString().split('T')[0],
        payment_note: payable.payment_note || '',
    });

    const handleInvoiceSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        invoiceForm.post(route('account-payables.invoice', payable.id), {
            preserveScroll: true,
            onSuccess: () => {
                setInvoiceDialogOpen(false);
                toast.success('發票資訊已更新');
            },
            onError: (errors) => {
                toast.error(Object.values(errors)[0] as string || '更新失敗');
            }
        });
    };

    const handlePaymentSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        paymentForm.post(route('account-payables.pay', payable.id), {
            preserveScroll: true,
            onSuccess: () => {
                setPaymentDialogOpen(false);
                toast.success('帳款已成功標記為已付款');
            },
            onError: (errors) => {
                toast.error(Object.values(errors)[0] as string || '標記失敗');
            }
        });
    };

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: '財務管理', href: '#' },
                { label: '應付帳款', href: route('account-payables.index') },
                { label: `詳情: ${payable.document_number}` }
            ]}
        >
            <Head title={`應付帳款 - ${payable.document_number}`} />

            <div className="container mx-auto p-6 max-w-7xl">
                {/* Back Button */}
                <div className="mb-6">
                    <Link href={route('account-payables.index')}>
                        <Button
                            variant="outline"
                            className="gap-2 button-outlined-primary"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回列表
                        </Button>
                    </Link>
                </div>

                {/* 頁面標題與操作 */}
                <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                                <Wallet className="h-6 w-6 text-primary-main" />
                                應付帳款: {payable.document_number}
                            </h1>
                            {/* @ts-ignore */}
                            <StatusBadge variant={getStatusBadgeVariant(payable.status)}>
                                {getStatusLabel(payable.status)}
                            </StatusBadge>
                        </div>
                        <p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
                            供應商: {payable.vendor?.name || '未知供應商'} <span className="mx-1">|</span>
                            建立者: {payable.creator?.name || "-"} <span className="mx-1">|</span>
                            到期日: {formatDate(payable.due_date)} <span className="mx-1">|</span>
                            建立時間: {formatDate(payable.created_at)}
                        </p>
                    </div>

                    <div className="flex flex-wrap items-center gap-2">
                        <Can permission="account_payables.edit">
                            <Button
                                variant="outline"
                                className="gap-2 button-outlined-primary"
                                onClick={() => setInvoiceDialogOpen(true)}
                            >
                                <FileText className="h-4 w-4" />
                                登記發票
                            </Button>
                        </Can>

                        {payable.status !== 'paid' && (
                            <Can permission="account_payables.pay">
                                <Button
                                    className="gap-2 button-filled-primary"
                                    onClick={() => setPaymentDialogOpen(true)}
                                >
                                    <CheckCircle className="h-4 w-4" />
                                    標記已付款
                                </Button>
                            </Can>
                        )}
                    </div>
                </div>

                <div className="space-y-6">
                    {/* 進階資訊 */}
                    <div className="bg-white rounded-lg shadow-sm border p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">進階資訊</h2>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
                            <div>
                                <span className="text-sm text-gray-500 block mb-1">總金額</span>
                                <p className="font-medium text-gray-800">
                                    ${parseFloat(payable.total_amount).toLocaleString()}
                                </p>
                            </div>
                            <div>
                                <span className="text-sm text-gray-500 block mb-1">來源類型</span>
                                <p className="font-medium text-gray-800">
                                    {payable.source_document_type === 'goods_receipt' ? (
                                        <Badge variant="outline" className="font-normal border-gray-300">進貨單</Badge>
                                    ) : (
                                        payable.source_document_type || '-'
                                    )}
                                </p>
                            </div>
                            <div>
                                <span className="text-sm text-gray-500 block mb-1">來源單號</span>
                                <div className="flex items-center gap-2">
                                    <p className="font-medium text-gray-800">
                                        {payable.source_document_code || payable.source_document_id || '-'}
                                    </p>
                                    {payable.source_document_type === 'goods_receipt' && payable.source_document_id && (
                                        <Link
                                            href={route('goods-receipts.show', [payable.source_document_id]) + `?from=account-payables&from_id=${payable.id}&from_label=${payable.document_number}`}
                                            className="text-primary-main hover:underline flex items-center gap-1 text-sm font-medium"
                                        >
                                            查閱 <ExternalLink className="h-3 w-3" />
                                        </Link>
                                    )}
                                </div>
                            </div>
                        </div>
                        {payable.remarks && (
                            <div className="mt-8 pt-6 border-t border-gray-100">
                                <span className="text-sm text-gray-500 block mb-2">備註</span>
                                <p className="text-sm text-gray-700 bg-gray-50 p-4 rounded-lg leading-relaxed">
                                    {payable.remarks}
                                </p>
                            </div>
                        )}
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {/* 發票資訊 */}
                        <div className="bg-primary-main/5 rounded-xl border border-primary-main/20 p-6">
                            <div className="flex justify-between items-center mb-4">
                                <h2 className="text-lg font-semibold text-primary-main flex items-center gap-2">
                                    <FileText className="h-5 w-5 text-primary-main" />
                                    發票資訊
                                </h2>
                                <Can permission="account_payables.edit">
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        className="text-primary-main hover:text-primary-dark hover:bg-primary-main/10"
                                        onClick={() => setInvoiceDialogOpen(true)}
                                    >
                                        {payable.invoice_number ? '修改' : '填寫'}
                                    </Button>
                                </Can>
                            </div>
                            <div className="space-y-4">
                                <div>
                                    <span className="text-sm text-primary-main/70">發票號碼</span>
                                    <p className="font-medium text-primary-dark mt-1">
                                        {payable.invoice_number || <span className="opacity-70 italic">尚未登記</span>}
                                    </p>
                                </div>
                                <div>
                                    <span className="text-sm text-primary-main/70">發票日期</span>
                                    <p className="font-medium text-primary-dark mt-1">
                                        {payable.invoice_date ? formatDate(payable.invoice_date) : '-'}
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* 付款資訊 */}
                        {payable.status === 'paid' && (
                            <div className="bg-white rounded-lg shadow-sm border p-6">
                                <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                    <CheckCircle className="h-5 w-5 text-success-main" />
                                    付款資訊
                                </h2>
                                <div className="space-y-4">
                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <span className="text-sm text-gray-500">付款狀態</span>
                                            <p className="font-medium text-success-main mt-1">
                                                已結清
                                            </p>
                                        </div>
                                        <div>
                                            <span className="text-sm text-gray-500">付款方式</span>
                                            <p className="font-medium text-gray-800 mt-1">
                                                {payable.payment_method === 'cash' && '現金'}
                                                {payable.payment_method === 'bank_transfer' && '銀行轉帳'}
                                                {payable.payment_method === 'check' && '支票'}
                                                {payable.payment_method === 'credit_card' && '信用卡'}
                                                {!['cash', 'bank_transfer', 'check', 'credit_card'].includes(payable.payment_method) && (payable.payment_method || '-')}
                                            </p>
                                        </div>
                                        <div>
                                            <span className="text-sm text-gray-500">付款日期</span>
                                            <p className="font-medium text-gray-800 mt-1">
                                                {payable.paid_at ? formatDate(payable.paid_at) : '-'}
                                            </p>
                                        </div>
                                    </div>
                                    {payable.payment_note && (
                                        <div>
                                            <span className="text-sm text-gray-500">付款備註</span>
                                            <p className="font-medium text-gray-800 mt-1">
                                                {payable.payment_note}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                </div>

                {/* 發票對話框 */}
                <Dialog open={invoiceDialogOpen} onOpenChange={setInvoiceDialogOpen}>
                    <DialogContent>
                        <form onSubmit={handleInvoiceSubmit}>
                            <DialogHeader>
                                <DialogTitle>登記發票資訊</DialogTitle>
                                <DialogDescription>
                                    請填寫供應商開立的發票資料以利後續帳務核對
                                </DialogDescription>
                            </DialogHeader>
                            <div className="space-y-4 py-4">
                                <div className="space-y-2">
                                    <Label htmlFor="invoice_number">發票號碼</Label>
                                    <Input
                                        id="invoice_number"
                                        value={invoiceForm.data.invoice_number}
                                        onChange={e => invoiceForm.setData('invoice_number', e.target.value)}
                                        placeholder="例如: AB12345678"
                                    />
                                    {invoiceForm.errors.invoice_number && <p className="text-sm text-destructive">{invoiceForm.errors.invoice_number}</p>}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="invoice_date">發票日期</Label>
                                    <Input
                                        id="invoice_date"
                                        type="date"
                                        value={invoiceForm.data.invoice_date}
                                        onChange={e => invoiceForm.setData('invoice_date', e.target.value)}
                                    />
                                    {invoiceForm.errors.invoice_date && <p className="text-sm text-destructive">{invoiceForm.errors.invoice_date}</p>}
                                </div>
                            </div>
                            <DialogFooter>
                                <Button type="button" variant="outline" className="button-outlined-primary" onClick={() => setInvoiceDialogOpen(false)}>取消</Button>
                                <Button type="submit" disabled={invoiceForm.processing} className="button-filled-primary">儲存</Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>

                {/* 付款對話框 */}
                <Dialog open={paymentDialogOpen} onOpenChange={setPaymentDialogOpen}>
                    <DialogContent>
                        <form onSubmit={handlePaymentSubmit}>
                            <DialogHeader>
                                <DialogTitle>標記為已付款</DialogTitle>
                                <DialogDescription>
                                    標示此應付帳款已支付給供應商。記錄一旦送出後，付款資訊將無法輕易修改。
                                </DialogDescription>
                            </DialogHeader>
                            <div className="space-y-4 py-4">
                                <div className="space-y-2">
                                    <Label htmlFor="payment_method">付款方式</Label>
                                    <select
                                        id="payment_method"
                                        className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-main focus:border-transparent text-gray-700"
                                        value={paymentForm.data.payment_method}
                                        onChange={(e) => paymentForm.setData('payment_method', e.target.value)}
                                        required
                                    >
                                        <option value="bank_transfer">銀行轉帳/匯款</option>
                                        <option value="cash">現金</option>
                                        <option value="check">支票</option>
                                        <option value="credit_card">信用卡</option>
                                        <option value="other">其他</option>
                                    </select>
                                    {paymentForm.errors.payment_method && <p className="text-sm text-destructive">{paymentForm.errors.payment_method}</p>}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="paid_at">付款日期</Label>
                                    <Input
                                        id="paid_at"
                                        type="date"
                                        value={paymentForm.data.paid_at}
                                        onChange={e => paymentForm.setData('paid_at', e.target.value)}
                                        required
                                    />
                                    {paymentForm.errors.paid_at && <p className="text-sm text-destructive">{paymentForm.errors.paid_at}</p>}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="payment_note">付款備註 (選填)</Label>
                                    <Input
                                        id="payment_note"
                                        value={paymentForm.data.payment_note}
                                        onChange={e => paymentForm.setData('payment_note', e.target.value)}
                                        placeholder="例如: 匯款帳號後五碼、支票號碼..."
                                    />
                                    {paymentForm.errors.payment_note && <p className="text-sm text-destructive">{paymentForm.errors.payment_note}</p>}
                                </div>
                            </div>
                            <DialogFooter>
                                <Button type="button" variant="outline" className="button-outlined-primary" onClick={() => setPaymentDialogOpen(false)}>取消</Button>
                                <Button type="submit" disabled={paymentForm.processing} className="button-filled-primary">確認已付款</Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>

            </div>
        </AuthenticatedLayout>
    );
}
