import { useState } from 'react';
import { router } from '@inertiajs/react';
import { RefreshCw, Loader2, AlertTriangle } from 'lucide-react';
import { AccountSelector } from './AccountSelector';

type Freshness = {
    updated_human: string;
    any_stale: boolean;
    providers: { key: string; name: string; account: string; last_synced_human: string; stale: boolean }[];
};

/**
 * Shows how fresh the underlying data is and offers a manual re-sync. Without this the
 * report can quietly show yesterday's numbers with no visible cue.
 */
export function ReportHeader({ freshness }: { freshness?: Freshness }) {
    const [busy, setBusy] = useState(false);
    const [detail, setDetail] = useState(false);



    const refresh = async () => {
        setBusy(true);
        try {
            await fetch('/portfolio/refresh', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            router.reload();
        } finally {
            setBusy(false);
        }
    };

    return (
        <div className="relative mb-4 flex items-center justify-end gap-3 text-xs">
            <AccountSelector />
            {! freshness ? null : (<>
            <button onClick={() => setDetail(! detail)}
                className={`flex items-center gap-1.5 ${freshness.any_stale ? 'text-amber-600' : 'text-muted-foreground'} hover:underline`}>
                {freshness.any_stale && <AlertTriangle className="size-3.5" />}
                Updated {freshness.updated_human}
            </button>

            <button onClick={refresh} disabled={busy}
                className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60">
                {busy ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
                {busy ? 'Syncing…' : 'Refresh'}
            </button>

            {detail && (
                <div className="absolute right-0 top-8 z-20 w-72 rounded-xl border border-border bg-card p-3 shadow-lg">
                    <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Data sources</p>
                    {freshness.providers.map((p) => (
                        <div key={p.key + p.account} className="flex items-center justify-between py-1">
                            <span className="text-foreground">{p.name}</span>
                            <span className={p.stale ? 'text-amber-600' : 'text-muted-foreground'}>{p.last_synced_human}</span>
                        </div>
                    ))}
                    {freshness.providers.length === 0 && (
                        <p className="text-muted-foreground">No connected sources.</p>
                    )}
                </div>
            )}
            </>)}
        </div>
    );
}