import {
    Building2,
    Clock,
    Database,
    Home,
    Phone,
    User,
    Users,
} from 'lucide-react';

import branchesRoutes from '@/actions/App/Http/Controllers/BranchController';
import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import { formatIDR } from '@/lib/formatters';
import type { BranchShowProps, BreadcrumbItem } from '@/types';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Cabang',
        href: branchesRoutes.index().url,
    },
    {
        title: 'Detail Cabang',
        href: '#',
    },
];

export default function Show({ branch, summary }: BranchShowProps) {
    console.log(summary);
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <div className="flex h-full flex-1 flex-col gap-6 rounded-xl p-4">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-black">{branch.name}</h1>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            {branch.is_headquarters && (
                                <span className="inline-flex items-center rounded-full bg-primary px-2 py-1 text-xs font-medium text-white">
                                    <Building2 className="mr-1 h-3 w-3" />
                                    Cabang Pusat
                                </span>
                            )}
                            <span>
                                Kode:{' '}
                                <span className="font-mono">{branch.code}</span>
                            </span>
                            {branch.city && <span>Kota: {branch.city}</span>}
                        </div>
                    </div>
                </div>

                {/* Stats Cards */}
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    {/* Members Stats */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-sm font-medium">
                                Anggota
                            </CardTitle>
                            <CardAction>
                                {' '}
                                <Users size={20} />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <span className="text-2xl font-semibold">
                                {summary.members.total}
                            </span>
                            <CardDescription>
                                Jumlah anggota aktif: {summary.members.active}
                            </CardDescription>
                        </CardContent>
                    </Card>

                    {/* Savings Stats */}
                    <Card>
                        <CardContent className="space-y-2">
                            <div className="grid grid-cols-3 gap-4">
                                <div className="col-span-2 flex flex-col gap-1">
                                    <CardTitle className="text-sm font-medium">
                                        Total Saldo Tabungan
                                    </CardTitle>
                                    <span className="text-2xl font-semibold">
                                        {formatIDR(
                                            summary.savings.total_balance,
                                        )}
                                    </span>
                                </div>
                                <div className="col-span-1 flex items-center justify-end">
                                    <div className="rounded-md bg-primary/10 p-2 text-primary">
                                        <Database size={36} />
                                    </div>
                                </div>
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Jumlah rekening aktif:{' '}
                                {summary.savings.active_accounts}
                            </p>
                        </CardContent>
                    </Card>

                    {/* Financing Stats */}
                    <Card>
                        <CardContent className="space-y-2">
                            <div className="grid grid-cols-3 gap-4">
                                <div className="col-span-2 flex flex-col gap-1">
                                    <CardTitle className="text-sm font-medium">
                                        Total Pembiayaan
                                    </CardTitle>
                                    <span className="text-2xl font-semibold">
                                        {formatIDR(
                                            summary.financing.total_balance,
                                        )}
                                    </span>
                                </div>
                                <div className="col-span-1 flex items-center justify-end">
                                    <div className="rounded-md bg-primary/10 p-2 text-primary">
                                        <Home size={36} />
                                    </div>
                                </div>
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Pembiayaan aktif:{' '}
                                {summary.financing.active_financings}
                            </p>
                        </CardContent>
                    </Card>

                    {/* Users Stats */}
                    <Card>
                        <CardContent className="space-y-2">
                            <div className="grid grid-cols-3 gap-4">
                                <div className="col-span-2 flex flex-col gap-1">
                                    <CardTitle className="text-sm font-medium">
                                        Total Pengguna
                                    </CardTitle>
                                    <span className="text-2xl font-semibold">
                                        {summary.users.total}
                                    </span>
                                </div>
                                <div className="col-span-1 flex items-center justify-end">
                                    <div className="rounded-md bg-primary/10 p-2 text-primary">
                                        <User size={36} />
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Overdue Financing Warning */}
                    {summary.financing.overdue_count > 0 && (
                        <Card>
                            <CardContent className="space-y-2">
                                <div className="flex items-start gap-3">
                                    <div className="rounded-md bg-destructive/10 p-2 text-destructive">
                                        <Clock size={24} />
                                    </div>
                                    <div className="flex flex-col gap-1">
                                        <CardTitle className="text-sm font-medium">
                                            Peringatan
                                        </CardTitle>
                                        <p className="text-sm">
                                            Ada{' '}
                                            <span className="font-semibold">
                                                {
                                                    summary.financing
                                                        .overdue_count
                                                }
                                            </span>{' '}
                                            pembiayaan tunggakan
                                        </p>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    )}
                </div>

                {/* Branch Details */}
                <Card>
                    <CardContent>
                        <div className="grid gap-6 md:grid-cols-2">
                            {/* Contact Information */}
                            <div className="space-y-3">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Informasi Kontak
                                </h3>
                                <div className="space-y-2">
                                    {branch.phone && (
                                        <div className="flex items-center gap-2 text-sm">
                                            <Phone className="h-4 w-4 text-muted-foreground" />
                                            <span>{branch.phone}</span>
                                        </div>
                                    )}
                                    {branch.email && (
                                        <div className="flex items-center gap-2 text-sm">
                                            <span className="text-muted-foreground">
                                                Email:
                                            </span>
                                            <span>{branch.email}</span>
                                        </div>
                                    )}
                                    {branch.address && (
                                        <div className="flex items-start gap-2 text-sm">
                                            <Building2 className="h-4 w-4 text-muted-foreground" />
                                            <span>{branch.address}</span>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Location Information */}
                            <div className="space-y-3">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Informasi Lokasi
                                </h3>
                                <div className="space-y-2">
                                    <div className="flex items-center gap-2 text-sm">
                                        <Building2 className="h-4 w-4 text-muted-foreground" />
                                        <span>
                                            {branch.city}
                                            {branch.province &&
                                                `, ${branch.province}`}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            {/* Branch Information */}
                            <div className="space-y-3">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Informasi Cabang
                                </h3>
                                <div className="space-y-2 text-sm">
                                    <div className="flex justify-between">
                                        <span>
                                            ID Cabang:{' '}
                                            <span className="font-mono">
                                                {branch.id}
                                            </span>
                                        </span>
                                        <span className="text-muted-foreground">
                                            Dibuat: {branch.created_at}
                                        </span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>
                                            Status:{' '}
                                            <span
                                                className={`inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium ${
                                                    branch.is_active
                                                        ? 'bg-green-100 text-green-700'
                                                        : 'bg-gray-100 text-gray-700'
                                                }`}
                                            >
                                                {branch.is_active
                                                    ? 'Aktif'
                                                    : 'Tidak Aktif'}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}