import React, { useState } from 'react';
import { Link } from '@inertiajs/react';
import { 
    Eye, 
    EyeOff, 
    ChevronRight, 
    ReceiptText 
} from 'lucide-react';
import TactileCard from '@/Components/UI/TactileCard';

/**
 * SupplierCashflowSplitHero
 * 
 * Apple HIG-grade polymorphic fintech cashflow card (SeaBank style).
 * Features:
 * 1. Single breathable tactile surface with Brand Teal background.
 * 2. Polymorphic Business Logic:
 *    - Konsinyasi Berkala (Default Shelf): 'Penjualan Bulan Ini' vs 'Sudah Dicairkan'.
 *    - Konsinyasi Harian (Fresh / Retur Sore): 'Penjualan Hari Ini' vs 'Sudah Dicairkan'.
 *    - TOP (Tempo Faktur): 'Faktur Bulan Ini' vs 'Faktur Terbayar'.
 *    - Beli Putus (Cash): 'Pasokan Bulan Ini' vs 'Total Terbayar'.
 * 3. Hairline Divider: Single horizontal hairline (no nested boxes / no sunken chambers).
 * 4. Privacy Toggle: Eye toggle for balance visibility.
 * 5. Detached Notice: Standalone alert banner for Unpaid Monthly Fee.
 */
export default function SupplierCashflowSplitHero({
    supplier = {},
    unsettledBalance = 0,
    todayEarned = 0,
    todaySettled = 0,
    monthEarned = 0,
    monthSettled = 0,
    itemsSoldToday = 0,
    monthSold = 0,
    currentMonthlyFee = null,
    withdrawHref = '/supplier/settlements',
    className = '',
}) {
    const [showBalance, setShowBalance] = useState(true);

    const formatRp = (val) => `Rp ${Number(val || 0).toLocaleString('id-ID')}`;

    const isFeeUnpaid = currentMonthlyFee && 
        currentMonthlyFee.status !== 'PAID' && 
        currentMonthlyFee.status !== 'WAIVED';

    // 1. Polymorphic Business Model Detection
    const isBeliPutus = supplier?.partnership_type === 'BELI_PUTUS';
    const isTop = supplier?.partnership_type === 'TOP';
    const isDaily = Boolean(
        supplier?.requires_evening_reconciliation || 
        supplier?.has_fresh_products
    );

    // 2. Dynamic Semantic Hierarchy Labels & Values
    let heroLabel = 'Siap Dicairkan';
    let heroValue = unsettledBalance;
    let leftLabel = 'Penjualan Bulan Ini';
    let leftValue = monthEarned;
    let rightLabel = 'Sudah Dicairkan';
    let rightValue = monthSettled;

    if (isBeliPutus) {
        heroLabel = 'Status Kemitraan';
        heroValue = 'Beli Putus (Lunas)';
        leftLabel = 'Pasokan Bulan Ini';
        leftValue = monthEarned;
        rightLabel = 'Total Terbayar';
        rightValue = monthSettled;
    } else if (isTop) {
        heroLabel = 'Tagihan Berjalan';
        heroValue = unsettledBalance;
        leftLabel = 'Faktur Bulan Ini';
        leftValue = monthEarned;
        rightLabel = 'Faktur Terbayar';
        rightValue = monthSettled;
    } else if (isDaily) {
        // Konsinyasi Harian (Fresh / Kue Basah / Retur Sore)
        heroLabel = 'Siap Dicairkan';
        heroValue = unsettledBalance;
        leftLabel = 'Penjualan Hari Ini';
        leftValue = todayEarned;
        rightLabel = 'Sudah Dicairkan';
        rightValue = todaySettled;
    }

    return (
        <div className={`space-y-3.5 ${className}`}>
            {/* Standalone Alert Banner for Unpaid Monthly Fee (Separated from Hero Card) */}
            {isFeeUnpaid && (
                <div className="rounded-2xl bg-amber-500/10 border border-amber-500/25 p-3.5 sm:p-4 flex items-center justify-between gap-3 text-amber-950">
                    <div className="flex items-center gap-2.5 min-w-0">
                        <div className="w-8 h-8 rounded-xl bg-amber-500/20 flex items-center justify-center shrink-0">
                            <ReceiptText className="w-4 h-4 text-amber-800" />
                        </div>
                        <div className="truncate">
                            <p className="text-xs font-bold text-amber-950">
                                Iuran Kemitraan Belum Dibayar
                            </p>
                            <p className="text-[11px] text-amber-800/90 mt-0.5">
                                Periode {currentMonthlyFee.fee_period || 'Bulan Ini'} • {formatRp(currentMonthlyFee.amount)}
                            </p>
                        </div>
                    </div>
                    <span className="text-[10px] font-bold uppercase tracking-wider bg-amber-500/20 text-amber-900 border border-amber-500/30 px-2.5 py-1 rounded-full shrink-0">
                        Belum Bayar
                    </span>
                </div>
            )}

            {/* Unified SeaBank-Style Tactile Hero Card */}
            <TactileCard
                variant="teal"
                rings={true}
                rounded="squircle"
                className="w-full p-6 sm:p-7 relative overflow-hidden"
            >
                {/* 1. Top Action Row: Saldo Label + Eye Toggle & History CTA */}
                <div className="flex items-center justify-between gap-3">
                    <div className="flex items-center gap-2">
                        <span className="text-xs sm:text-sm font-medium text-teal-100/90 tracking-wide">
                            {heroLabel}
                        </span>
                        <button
                            type="button"
                            onClick={() => setShowBalance(!showBalance)}
                            className="text-teal-200/80 hover:text-white transition-colors cursor-pointer p-0.5"
                            aria-label={showBalance ? 'Sembunyikan saldo' : 'Tampilkan saldo'}
                        >
                            {showBalance ? (
                                <Eye className="w-4 h-4 opacity-80 hover:opacity-100 transition-opacity" />
                            ) : (
                                <EyeOff className="w-4 h-4 opacity-80 hover:opacity-100 transition-opacity" />
                            )}
                        </button>
                    </div>

                    <Link
                        href={withdrawHref}
                        className="bg-white hover:bg-slate-50 text-slate-800 text-xs font-bold px-3.5 py-1.5 rounded-full shadow-xs flex items-center gap-1 transition-all active:scale-95 shrink-0"
                    >
                        <span>Riwayat</span>
                        <ChevronRight className="w-3.5 h-3.5 text-slate-400" />
                    </Link>
                </div>

                {/* 2. Hero Balance (Primary Focal Point) */}
                <div className="my-3 sm:my-4">
                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight font-tabular">
                        {typeof heroValue === 'number' 
                            ? (showBalance ? formatRp(heroValue) : 'Rp ••••••••') 
                            : heroValue}
                    </h1>
                </div>

                {/* 3. Hairline Divider (Flat & Clean, No Nested Boxes) */}
                <div className="border-t border-white/20 my-4 sm:my-5" />

                {/* 4. Secondary Telemetry Row: Minimalist 2-Column Velocity & Provenance */}
                <div className="grid grid-cols-2 gap-4 sm:gap-8">
                    {/* Left Column: Sales Volume in Period */}
                    <div>
                        <span className="text-xs sm:text-sm font-medium text-teal-100/80 block">
                            {leftLabel}
                        </span>
                        <span className="text-lg sm:text-2xl font-bold text-white font-tabular tracking-tight mt-1 block">
                            {showBalance ? formatRp(leftValue) : 'Rp ••••••'}
                        </span>
                    </div>

                    {/* Right Column: Actual Realized Settlement */}
                    <div>
                        <span className="text-xs sm:text-sm font-medium text-teal-100/80 block">
                            {rightLabel}
                        </span>
                        <span className="text-lg sm:text-2xl font-bold text-white font-tabular tracking-tight mt-1 block">
                            {showBalance ? formatRp(rightValue) : 'Rp ••••••'}
                        </span>
                    </div>
                </div>
            </TactileCard>
        </div>
    );
}