import { useMemo } from 'react';
import { router, usePage } from '@inertiajs/react';
import { ContractsTable } from '../components/contract-table';
import { AlertsPanel } from '../components/alerts-panel';
import { StatCard } from '../components/stat-card';
import {
    Bell,
    Search,
    Plus,
    FileText,
    CheckCircle,
    Clock,
    ShieldAlert,
} from 'lucide-react';

interface Contract {
    id: string | number;
    docName: string;
    docNumber: string;
    docType: string;
    counterParty: string;
    internalParty: string;
    isSigned: boolean;
    value: number;
    createdAt?: string;
    created_at: string;
    end_date?: string;
}

function getDaysUntil(date: string): number {
    const today = new Date();
    const targetDate = new Date(date);
    const diff = targetDate.getTime() - today.getTime();
    return Math.ceil(diff / (1000 * 60 * 60 * 24));
}

function formatCurrency(value: number): string {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
        maximumFractionDigits: 2,
        notation: 'compact',
    }).format(value);
}

export default function DashboardPage() {
    const { contracts = [], auth } = usePage<{
        contracts: Contract[];
        auth: any;
    }>().props;

    const handleNavigateToUpload = () => {
        router.get('/contract-form');
    };

    const handleDeleteContract = (contractId: string | number) => {
        if (confirm('Yakin ingin menghapus kontrak ini?')) {
            router.delete(`/contracts/${contractId}`, {
                preserveScroll: true,
            });
        }
    };

    const stats = useMemo(() => {
        const totalContracts = contracts.length;
        const totalValue = contracts.reduce(
            (sum, c) => sum + (Number(c.value) || 0),
            0,
        );
        const signedCount = contracts.filter((c) => c.isSigned).length;
        const unsignedCount = totalContracts - signedCount;

        const expiringIn30Days = contracts.filter((c) => {
            if (!c.end_date) return false;
            const daysUntil = getDaysUntil(c.end_date);
            return daysUntil <= 30 && daysUntil > 0;
        }).length;

        const signedPercentage =
            totalContracts > 0
                ? Math.round((signedCount / totalContracts) * 100)
                : 0;

        return {
            totalContracts,
            totalValue,
            signedCount,
            unsignedCount,
            expiringIn30Days,
            signedPercentage,
        };
    }, [contracts]);

    const docTypeStats = useMemo(() => {
        const typeCounts: Record<string, number> = {};
        contracts.forEach((c) => {
            if (c.docType) {
                typeCounts[c.docType] = (typeCounts[c.docType] || 0) + 1;
            }
        });
        return Object.entries(typeCounts)
            .map(([type, count]) => ({ type, count }))
            .sort((a, b) => b.count - a.count);
    }, [contracts]);

    return (
        <div className="flex min-h-screen bg-slate-950 text-white">
            <div className="flex min-h-screen flex-1 flex-col bg-slate-950">
                {/* Top Bar Navigation */}
                <header className="sticky top-0 z-40 border-b border-slate-800 bg-slate-900/50 backdrop-blur">
                    <div className="flex items-center justify-between px-8 py-4">
                        {/* Search Input Bar */}
                        <div className="max-w-md flex-1">
                            <div className="relative">
                                <Search className="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-slate-500" />
                                <input
                                    type="text"
                                    placeholder="Search contracts, parties..."
                                    className="w-full rounded-lg border border-slate-800 bg-slate-950 py-2 pr-4 pl-10 text-sm text-white placeholder-slate-500 focus:border-blue-500 focus:outline-none"
                                />
                            </div>
                        </div>

                        {/* Action Group */}
                        <div className="flex items-center gap-4">
                            <button
                                onClick={handleNavigateToUpload}
                                className="inline-flex items-center gap-2 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-orange-700"
                            >
                                <Plus className="h-4 w-4" />
                                New contract
                            </button>

                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-600 text-sm font-bold">
                                {auth?.user?.name
                                    ? auth.user.name[0].toUpperCase()
                                    : 'U'}
                            </div>
                        </div>
                    </div>
                </header>

                {/* Dashboard Content */}
                <main className="flex-1 space-y-8 overflow-auto p-8">
                    <div>
                        <h1 className="text-3xl font-bold text-white">
                            Contract overview
                        </h1>
                        <p className="mt-1 text-slate-400">
                            Track agreements, monitor status, and stay ahead of
                            renewals.
                        </p>
                    </div>

                    {/* 4 Grid Utama Stat Cards */}
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
                        <StatCard
                            title="Total contracts"
                            value={stats.totalContracts}
                            subtitle={`${stats.signedCount} active, ${stats.unsignedCount} pending`}
                            icon={FileText}
                            iconColor="text-blue-400"
                        />
                        <StatCard
                            title="Total Nilai"
                            value={formatCurrency(stats.totalValue)}
                            subtitle="Akumulasi seluruh nilai dokumen"
                            icon={CheckCircle}
                            iconColor="text-green-400"
                        />
                        <StatCard
                            title="Sudah Ditandatangani"
                            value={stats.signedCount}
                            subtitle={`${stats.signedPercentage}% dari total dokumen`}
                            icon={Clock}
                            iconColor="text-purple-400"
                        />
                        <StatCard
                            title="Expiring in 30 days"
                            value={stats.expiringIn30Days}
                            subtitle="Butuh perhatian segera"
                            icon={ShieldAlert}
                            iconColor="text-orange-400"
                        />
                    </div>

                    {/* Progress Bar Status & Distribusi */}
                    {contracts.length > 0 && (
                        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                            {/* Status TTD */}
                            <div className="rounded-lg border border-slate-800 bg-slate-900 p-6">
                                <h3 className="mb-4 text-lg font-semibold text-white">
                                    Status Penandatanganan
                                </h3>
                                <div className="space-y-4">
                                    <div>
                                        <div className="mb-1 flex items-center justify-between text-sm">
                                            <span className="text-slate-400">
                                                Ditandatangani
                                            </span>
                                            <span className="font-medium text-green-400">
                                                {stats.signedCount} (
                                                {stats.signedPercentage}%)
                                            </span>
                                        </div>
                                        <div className="h-2 rounded-full bg-slate-800">
                                            <div
                                                className="h-2 rounded-full bg-green-500"
                                                style={{
                                                    width: `${stats.signedPercentage}%`,
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div>
                                        <div className="mb-1 flex items-center justify-between text-sm">
                                            <span className="text-slate-400">
                                                Belum Ditandatangani
                                            </span>
                                            <span className="font-medium text-orange-400">
                                                {stats.unsignedCount} (
                                                {100 - stats.signedPercentage}%)
                                            </span>
                                        </div>
                                        <div className="h-2 rounded-full bg-slate-800">
                                            <div
                                                className="h-2 rounded-full bg-orange-500"
                                                style={{
                                                    width: `${100 - stats.signedPercentage}%`,
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Distribusi Tipe Dokumen */}
                            <div className="rounded-lg border border-slate-800 bg-slate-900 p-6">
                                <h3 className="mb-4 text-lg font-semibold text-white">
                                    Distribusi Tipe Dokumen
                                </h3>
                                <div className="max-h-[120px] space-y-3 overflow-y-auto pr-2">
                                    {docTypeStats.length > 0 ? (
                                        docTypeStats.map(({ type, count }) => (
                                            <div
                                                key={type}
                                                className="flex items-center justify-between"
                                            >
                                                <span className="text-sm text-slate-300">
                                                    {type}
                                                </span>
                                                <div className="flex items-center gap-3">
                                                    <div className="h-2 w-28 rounded-full bg-slate-800">
                                                        <div
                                                            className="h-2 rounded-full bg-indigo-500"
                                                            style={{
                                                                width: `${(count / contracts.length) * 100}%`,
                                                            }}
                                                        />
                                                    </div>
                                                    <span className="text-sm font-medium text-slate-200">
                                                        {count}
                                                    </span>
                                                </div>
                                            </div>
                                        ))
                                    ) : (
                                        <p className="text-sm text-slate-500 italic">
                                            Belum ada klasifikasi tipe dokumen.
                                        </p>
                                    )}
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Main Content Layout - Table and Alerts */}
                    <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                        {/* Table List */}
                        <div className="lg:col-span-2">
                            <h2 className="mb-4 text-lg font-semibold text-white">
                                Contracts Table
                            </h2>
                            <ContractsTable
                                contracts={contracts}
                                onDelete={handleDeleteContract}
                            />
                        </div>

                        {/* Alerts Sidebar */}
                        <div>
                            <h2 className="mb-4 text-lg font-semibold text-white">
                                Urgent Alerts
                            </h2>
                            <AlertsPanel contracts={contracts} />
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
}