import {
    Building2,
    Calendar,
    CreditCard,
    Hash,
    User,
    Wallet,
    WalletCards,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import type { AccountRow, AccountType } from '@/types/account';
import { accountTypeLabel } from '@/types/account';

type AccountViewDialogProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    account: AccountRow | null;
    accountType: AccountType;
};

function formatBalance(value: string): string {
    return new Intl.NumberFormat('en-BD', {
        style: 'currency',
        currency: 'BDT',
    }).format(Number(value));
}

function formatCardType(value: string | null): string {
    if (!value) {
        return '—';
    }

    return value.charAt(0).toUpperCase() + value.slice(1);
}

type InfoItemProps = {
    icon: LucideIcon;
    label: string;
    value: string;
    className?: string;
};

function InfoItem({ icon: Icon, label, value, className }: InfoItemProps) {
    return (
        <div
            className={cn(
                'flex gap-3 rounded-lg border bg-muted/30 p-3',
                className,
            )}
        >
            <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-background shadow-sm">
                <Icon className="size-4 text-muted-foreground" />
            </div>
            <div className="min-w-0 flex-1">
                <p className="text-xs text-muted-foreground">{label}</p>
                <p className="truncate text-sm font-medium">{value}</p>
            </div>
        </div>
    );
}

export function AccountViewDialog({
    open,
    onOpenChange,
    account,
    accountType,
}: AccountViewDialogProps) {
    if (!account) {
        return null;
    }

    const hasCard = Boolean(account.has_card);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-xl">
                <DialogHeader className="space-y-3 border-b px-6 py-5">
                    <div className="flex items-start justify-between gap-3 pr-6">
                        <div className="space-y-1">
                            <DialogTitle className="text-xl">
                                {account.account_name}
                            </DialogTitle>
                            <p className="text-sm text-muted-foreground">
                                {accountTypeLabel(accountType)} account
                                {account.bank ? ` · ${account.bank.name}` : ''}
                            </p>
                        </div>
                        <Badge
                            variant={
                                account.is_active ? 'default' : 'secondary'
                            }
                        >
                            {account.is_active ? 'Active' : 'Inactive'}
                        </Badge>
                    </div>
                </DialogHeader>

                <div className="space-y-6 px-6 py-5">
                    <div className="rounded-xl border bg-linear-to-br from-primary/5 via-background to-background p-4">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Wallet className="size-4" />
                            Current balance
                        </div>
                        <p className="mt-1 text-3xl font-semibold tracking-tight">
                            {formatBalance(account.current_balance)}
                        </p>
                        <p className="mt-2 text-sm text-muted-foreground">
                            Opening balance:{' '}
                            <span className="font-medium text-foreground">
                                {formatBalance(account.opening_balance)}
                            </span>
                        </p>
                    </div>

                    <div className="space-y-3">
                        <h3 className="text-sm font-medium">
                            Account information
                        </h3>
                        <div className="grid gap-3 sm:grid-cols-2">
                            <InfoItem
                                icon={User}
                                label="Account holder"
                                value={account.account_holder_name}
                                className="sm:col-span-2"
                            />

                            {accountType !== 'cash' && account.bank && (
                                <InfoItem
                                    icon={Building2}
                                    label="Bank"
                                    value={account.bank.name}
                                    className="sm:col-span-2"
                                />
                            )}

                            {accountType !== 'cash' && (
                                <InfoItem
                                    icon={Hash}
                                    label="Account number"
                                    value={account.account_number ?? '—'}
                                    className="sm:col-span-2"
                                />
                            )}
                        </div>
                    </div>

                    {accountType === 'bank' && hasCard && (
                        <>
                            <Separator />
                            <div className="space-y-3">
                                <div className="flex items-center gap-2">
                                    <CreditCard className="size-4 text-muted-foreground" />
                                    <h3 className="text-sm font-medium">
                                        Card details
                                    </h3>
                                </div>
                                <div className="grid gap-3 sm:grid-cols-2">
                                    <InfoItem
                                        icon={WalletCards}
                                        label="Card type"
                                        value={formatCardType(
                                            account.card_type,
                                        )}
                                    />
                                    <InfoItem
                                        icon={Calendar}
                                        label="Expiry date"
                                        value={account.card_expiry_date ?? '—'}
                                    />
                                    <InfoItem
                                        icon={CreditCard}
                                        label="Card number"
                                        value={account.card_number ?? '—'}
                                        className="sm:col-span-2"
                                    />
                                </div>
                            </div>
                        </>
                    )}
                </div>

                <DialogFooter className="border-t px-6 py-4">
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                    >
                        Close
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}