import { Building2, Database, Home } from 'lucide-react';

import {
    Card,
    CardAction,
    CardContent,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { formatIDR } from '@/lib/formatters';
import { type MemberSummary, type MemberWithBranch } from '@/types';

interface StatsCardProps {
    member: MemberWithBranch;
    summary?: MemberSummary;
}

export default function StatsCard({ member, summary }: StatsCardProps) {
    return (
        <div className="grid gap-4 md:grid-cols-3">
            <Card>
                <CardHeader>
                    <CardTitle>Total Tabungan</CardTitle>
                    <CardAction>
                        <Home className="h-4 w-4 text-muted-foreground" />
                    </CardAction>
                </CardHeader>
                <CardContent>
                    {summary ? (
                        <>
                            <div className="text-2xl font-bold">
                                {formatIDR(summary.savings.total_balance)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Jumlah tabungan :{' '}
                                {summary.savings.active_accounts} aktif
                            </p>
                        </>
                    ) : (
                        <div className="space-y-2">
                            <Skeleton className="h-8 w-32" />
                            <Skeleton className="h-4 w-24" />
                        </div>
                    )}
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Pembiayaan Aktif</CardTitle>
                    <CardAction>
                        <Database className="h-4 w-4 text-muted-foreground" />
                    </CardAction>
                </CardHeader>
                <CardContent>
                    {summary ? (
                        <>
                            <div className="text-2xl font-bold">
                                {formatIDR(summary.financing.total_balance)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {summary.financing.overdue_count > 0
                                    ? `${summary.financing.overdue_count} tunggakan`
                                    : 'Tidak ada tunggakan'}
                            </p>
                        </>
                    ) : (
                        <div className="space-y-2">
                            <Skeleton className="h-8 w-32" />
                            <Skeleton className="h-4 w-24" />
                        </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>
    );
}