import { Link, router } from '@inertiajs/react';
import {
    ArrowLeft,
    BadgeDollarSign,
    Edit,
    PiggyBank,
    Trash2,
} from 'lucide-react';
import { useState } from 'react';

import { Button } from '@/components/ui/button';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { Skeleton } from '@/components/ui/skeleton';
import { StatusBadge } from '@/components/ui/status-badge';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { usePermissions } from '@/hooks/use-permissions';
import { formatDateID } from '@/lib/formatters';
import { toastError, toastLoading, toastSuccess } from '@/lib/toast';
import financingRoutes from '@/routes/financing';
import membersRoutes from '@/routes/members';
import {
    type MemberSummary,
    type MemberWithBranch,
    type SavingsAccount,
} from '@/types';

interface ShowHeaderProps {
    member: MemberWithBranch;
    summary?: MemberSummary;
    savingsAccounts?: SavingsAccount[];
}

export default function ShowHeader({
    member,
    summary,
    savingsAccounts,
}: ShowHeaderProps) {
    const primaryAccount =
        savingsAccounts?.find((a) => a.status === 'active') ??
        savingsAccounts?.[0];
    const { can } = usePermissions();

    const [showDeleteModal, setShowDeleteModal] = useState(false);

    const isLoading = !summary || !savingsAccounts;

    const hasFinancialRecords =
        summary &&
        (summary.savings.total_accounts > 0 ||
            summary.financing.total_financings > 0);

    const handleDelete = () => {
        router.delete(membersRoutes.destroy({ member: member.id }).url, {
            onStart: () => toastLoading('Menghapus anggota...'),
            onSuccess: () => {
                toastSuccess('Anggota berhasil dihapus');
                setShowDeleteModal(false);
            },
            onError: (errors) => {
                toastError(errors.message || 'Gagal menghapus anggota');
            },
        });
    };

    return (
        <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
                <Button variant="outline" size="icon" asChild>
                    <Link href={membersRoutes.index().url}>
                        <ArrowLeft className="h-4 w-4" />
                    </Link>
                </Button>
                <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-3">
                        <h1 className="text-2xl font-black">{member.name}</h1>
                        <StatusBadge
                            type="member"
                            status={
                                member.is_verified ? 'verified' : 'unverified'
                            }
                        />
                    </div>
                    <span className="text-sm text-muted-foreground">
                        {member.id_number} • Terdaftar sejak{' '}
                        {formatDateID(member.registration_date)}
                    </span>
                </div>
            </div>
            <div className="flex gap-2">
                {isLoading ? (
                    <>
                        <Skeleton className="h-10 w-32" />
                        <Skeleton className="h-10 w-32" />
                        <Skeleton className="h-10 w-20" />
                        <Skeleton className="h-10 w-24" />
                    </>
                ) : (
                    <>
                        {can('savings.view') && primaryAccount && (
                            <Button variant="outline" asChild>
                                <Link href={`/savings/${primaryAccount.id}`}>
                                    <PiggyBank className="mr-2 h-4 w-4" />
                                    Buka Simpanan
                                </Link>
                            </Button>
                        )}

                        {can('financing.propose') && (
                            <Button variant="outline" asChild>
                                <Link href={financingRoutes.create().url}>
                                    <BadgeDollarSign className="mr-2 h-4 w-4" />
                                    Buat Pembiayaan
                                </Link>
                            </Button>
                        )}

                        {can('member.update') && (
                            <Button variant="outline" asChild>
                                <Link
                                    href={
                                        membersRoutes.edit({
                                            member: member.id,
                                        }).url
                                    }
                                >
                                    <Edit className="mr-2 h-4 w-4" />
                                    Edit
                                </Link>
                            </Button>
                        )}

                        {can('member.delete') && (
                            <>
                                <TooltipProvider>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <span className="inline-block">
                                                <Button
                                                    variant="destructive"
                                                    onClick={() =>
                                                        setShowDeleteModal(true)
                                                    }
                                                    disabled={
                                                        hasFinancialRecords
                                                    }
                                                >
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    Hapus
                                                </Button>
                                            </span>
                                        </TooltipTrigger>
                                        {hasFinancialRecords && (
                                            <TooltipContent>
                                                <p>
                                                    Tidak dapat menghapus
                                                    anggota yang memiliki data
                                                    simpanan atau pembiayaan
                                                </p>
                                            </TooltipContent>
                                        )}
                                    </Tooltip>
                                </TooltipProvider>

                                <ConfirmDialog
                                    open={showDeleteModal}
                                    onOpenChange={setShowDeleteModal}
                                    title="Hapus Anggota"
                                    description={`Apakah Anda yakin ingin menghapus anggota ${member.name}? Tindakan ini tidak dapat dibatalkan.`}
                                    confirmText="Hapus"
                                    onConfirm={handleDelete}
                                    variant="destructive"
                                />
                            </>
                        )}
                    </>
                )}
            </div>
        </div>
    );
}