import { Building2, Landmark, Wallet } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import {
    Card,
    CardAction,
    CardContent,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { formatIDR } from '@/lib/formatters';
import { Member } from '@/types';
import type { Financing } from '@/types/financing';
import type { SavingsAccount } from '@/types/savings';

interface FinancialAccountsProps {
    savings?: SavingsAccount[];
    financings?: Financing[];
    member?: Member;
}

export default function FinancialAccounts({
    savings,
    financings,
    member,
}: FinancialAccountsProps) {
    return (
        <div className="grid gap-4 md:grid-cols-3">
            {/* Savings Accounts */}
            <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                        Rekening Simpanan
                    </CardTitle>
                    <Landmark className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        {!savings ? (
                            <div className="space-y-3 py-2">
                                {[1, 2].map((i) => (
                                    <div
                                        key={i}
                                        className="flex items-center justify-between p-2"
                                    >
                                        <div className="space-y-2">
                                            <Skeleton className="h-4 w-32" />
                                            <Skeleton className="h-3 w-48" />
                                        </div>
                                        <div className="space-y-2 text-right">
                                            <Skeleton className="ml-auto h-4 w-24" />
                                            <Skeleton className="ml-auto h-4 w-12" />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : savings.length === 0 ? (
                            <p className="py-4 text-sm text-muted-foreground">
                                Tidak ada rekening simpanan aktif
                            </p>
                        ) : (
                            savings.map((account) => (
                                <div
                                    key={account.id}
                                    className="group flex items-center justify-between rounded-lg border border-transparent p-2"
                                >
                                    <div className="space-y-1">
                                        <p className="text-sm leading-none font-medium">
                                            {account.account_number}
                                        </p>
                                        <p className="text-xs text-muted-foreground">
                                            {account.savingsProduct?.name ||
                                                'Produk Simpanan'}
                                        </p>
                                    </div>
                                    <div className="text-right">
                                        <p className="text-sm font-bold">
                                            {formatIDR(account.balance)}
                                        </p>
                                        <Badge
                                            variant={
                                                account.status === 'active'
                                                    ? 'default'
                                                    : 'secondary'
                                            }
                                            className="h-4 text-[10px]"
                                        >
                                            {account.status}
                                        </Badge>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </CardContent>
            </Card>

            {/* Financing Accounts */}
            <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                        Kontrak Pembiayaan
                    </CardTitle>
                    <Wallet className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        {!financings ? (
                            <div className="space-y-3 py-2">
                                {[1, 2].map((i) => (
                                    <div
                                        key={i}
                                        className="flex items-center justify-between p-2"
                                    >
                                        <div className="space-y-2">
                                            <Skeleton className="h-4 w-32" />
                                            <Skeleton className="h-3 w-48" />
                                        </div>
                                        <div className="space-y-2 text-right">
                                            <Skeleton className="ml-auto h-4 w-24" />
                                            <Skeleton className="ml-auto h-4 w-12" />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : financings.length === 0 ? (
                            <p className="py-4 text-sm text-muted-foreground">
                                Tidak ada kontrak pembiayaan aktif
                            </p>
                        ) : (
                            financings.map((contract) => (
                                <div
                                    key={contract.id}
                                    className="group flex items-center justify-between rounded-lg border border-transparent p-2"
                                >
                                    <div className="space-y-1">
                                        <p className="text-sm leading-none font-medium">
                                            {contract.account_number}
                                        </p>
                                        <p className="text-xs text-muted-foreground">
                                            {contract.financing_product?.name ||
                                                'Produk Pembiayaan'}
                                        </p>
                                    </div>
                                    <div className="text-right">
                                        <p className="text-sm font-bold">
                                            {formatIDR(contract.total_balance)}
                                        </p>
                                        <Badge
                                            variant={
                                                contract.status === 'active'
                                                    ? 'default'
                                                    : (contract.status as string) ===
                                                        'overdue'
                                                      ? 'destructive'
                                                      : 'secondary'
                                            }
                                            className="h-4 text-[10px]"
                                        >
                                            {contract.status}
                                        </Badge>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </CardContent>
            </Card>
            {member?.branch && (
                <Card>
                    <CardHeader>
                        <CardTitle>Cabang</CardTitle>
                        <CardAction>
                            <Building2 className="h-4 w-4 text-muted-foreground" />
                        </CardAction>
                    </CardHeader>
                    <CardContent>
                        <div className="text-xl font-bold">
                            {member.branch.name}
                        </div>
                        <p className="text-xs text-muted-foreground">
                            ID: {member.branch.id}
                        </p>
                    </CardContent>
                </Card>
            )}
        </div>
    );
}