import { AlertCircle, Clock, RefreshCw } from 'lucide-react';
import { type Contract } from './contract-table';

type AlertsPanelProps = {
    contracts: Contract[];
};

function formatDate(date: Date | string): string {
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    return new Intl.DateTimeFormat('id-ID', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
    }).format(dateObj);
}

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

function getExpiryLabel(days: number): string {
    if (days < 0) return 'Expired';
    if (days === 0) return 'Today';
    if (days === 1) return 'Tomorrow';
    if (days <= 7) return `in ${days}d`;
    if (days <= 30) return `in ${Math.floor(days / 7)}w`;
    return `in ${Math.floor(days / 30)}mo`;
}

export function AlertsPanel({ contracts }: AlertsPanelProps) {
    // Ambil kontrak yang akan kedaluwarsa dalam 90 hari atau sudah kedaluwarsa
    const alerts = contracts
        .filter((c) => {
            if (!c.end_date) return false;
            const daysUntil = getDaysUntil(c.end_date);
            return daysUntil <= 90; // Menampilkan yang kurang dari atau sama dengan 90 hari
        })
        .sort((a, b) => getDaysUntil(a.end_date!) - getDaysUntil(b.end_date!))
        .slice(0, 5);

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

    if (alerts.length === 0) {
        return (
            <div className="rounded-lg border border-slate-700 bg-slate-800 p-6 shadow-sm">
                <div className="text-center">
                    <AlertCircle className="mx-auto mb-3 h-12 w-12 text-slate-400" />
                    <p className="text-sm text-slate-400">
                        No upcoming renewals
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="overflow-hidden rounded-lg border border-slate-700 bg-slate-800 shadow-sm">
            {/* Header Panel */}
            <div className="flex items-center justify-between border-b border-slate-700 bg-slate-800/50 px-6 py-4">
                <div className="flex items-center gap-2">
                    <RefreshCw className="animate-spin-slow h-5 w-5 text-slate-300" />
                    <h3 className="font-semibold text-white">
                        Renewal & expiry alerts
                    </h3>
                </div>
                {flaggedCount > 0 && (
                    <span className="inline-flex items-center rounded-full border border-red-800 bg-red-950/80 px-2.5 py-0.5 text-xs font-bold text-red-400">
                        {flaggedCount} flagged
                    </span>
                )}
            </div>

            {/* List Item Alerts */}
            <div className="divide-y divide-slate-700/60">
                {alerts.map((contract) => {
                    if (!contract.end_date) return null;
                    const daysUntil = getDaysUntil(contract.end_date);
                    const isExpired = daysUntil < 0;
                    const isSoon = daysUntil <= 7;
                    const expiryLabel = getExpiryLabel(daysUntil);

                    return (
                        <div
                            key={contract.id}
                            className="p-4 transition-colors hover:bg-slate-700/20"
                        >
                            <div className="flex items-start gap-3">
                                <div
                                    className={`mt-1 rounded-lg p-2 ${
                                        isExpired
                                            ? 'border border-red-900/50 bg-red-950/40 text-red-400'
                                            : isSoon
                                              ? 'border border-orange-900/50 bg-orange-950/40 text-orange-400'
                                              : 'border border-yellow-900/50 bg-yellow-950/40 text-yellow-400'
                                    }`}
                                >
                                    <Clock className="h-4 w-4" />
                                </div>
                                <div className="min-w-0 flex-1">
                                    <p className="truncate font-medium text-white">
                                        {contract.docName}
                                    </p>
                                    <p className="truncate text-xs text-slate-400">
                                        {contract.counterParty}
                                        {' - '}
                                        {contract.end_date
                                            ? formatDate(contract.end_date)
                                            : '-'}
                                    </p>
                                </div>
                            </div>

                            <div className="mt-3 flex items-center justify-between border-t border-slate-700/30 pt-2">
                                {contract.isSigned ? (
                                    <span className="text-xs font-medium text-green-400">
                                        Signed
                                    </span>
                                ) : (
                                    <span className="text-xs font-medium text-yellow-400">
                                        Not signed
                                    </span>
                                )}
                                <span
                                    className={`text-xs font-bold ${
                                        isExpired
                                            ? 'text-red-400'
                                            : isSoon
                                              ? 'text-orange-400'
                                              : 'text-slate-300'
                                    }`}
                                >
                                    {isExpired ? 'Expired' : expiryLabel}
                                </span>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}