import { Link, router } from '@inertiajs/react';
import {
    AlertTriangle,
    ArrowRight,
    BookOpen,
    Database,
    History,
    Layers,
} from 'lucide-react';
import { CatalogStatusBadge } from '@/components/shared/badges';
import { BrandTags } from '@/components/shared/brand-tags';
import { PageHeader } from '@/components/shared/page-header';
import { SectionCard } from '@/components/shared/section-card';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { brandLabel, formatCount, formatDateTime } from '@/lib/catalog';
import { cn } from '@/lib/utils';
import { index as importsIndex } from '@/routes/catalog/imports';
import { index as modelsIndex } from '@/routes/catalog/models';
import type { CatalogMetrics } from '@/types/catalog';

interface DashboardViewProps {
    metrics: CatalogMetrics;
}

const PYRAMID = [
    { key: 'models', label: 'Models', href: '/models' },
    { key: 'model_years', label: 'Model years', href: '/models' },
    { key: 'body_types', label: 'Body types', href: '/models' },
    { key: 'engines', label: 'Engines', href: '/models' },
    { key: 'trims', label: 'Trims', href: '/models' },
    { key: 'variants', label: 'Variants', href: '/variants' },
] as const;

const DICTIONARIES = [
    { key: 'section_definitions', label: 'Section definitions' },
    { key: 'body_type_section_elements', label: 'Section elements' },
    { key: 'body_type_feature_includes', label: 'Feature-include pairs' },
    { key: 'data_units', label: 'Data units' },
    { key: 'structure_categories', label: 'Structure categories' },
    { key: 'structure_category_items', label: 'Category items' },
    { key: 'structure_elements', label: 'Structure elements' },
] as const;

const IMPORT_STATUS_STYLES: Record<string, string> = {
    running: 'bg-orange-50 text-amber-700',
    completed: 'bg-green-50 text-green-700',
    failed: 'bg-red-50 text-red-700',
};

export function DashboardView({ metrics }: DashboardViewProps) {
    const { totals, byBrand, byStatus, byMarket, latestImport } = metrics;
    const brands = byBrand.map((row) => row.brand_code);
    const maxBrandModels = Math.max(1, ...byBrand.map((row) => row.models));

    return (
        <div className="custom-scroll flex-1 overflow-y-auto">
            <PageHeader
                title="Catalog"
                subtitle="Vehicle catalog — product database"
            >
                {byMarket.length > 0 && (
                    <span className="inline-flex h-[22px] items-center rounded bg-slate-100 px-2.5 text-[10px] font-bold tracking-widest text-slate-600 uppercase">
                        Market: {byMarket[0].market_code}
                    </span>
                )}
                <BrandTags
                    brands={brands}
                    onSelect={(brand) =>
                        router.get('/models', brand === null ? {} : { brand })
                    }
                />
            </PageHeader>

            <div className="p-6">
                <div className="grid grid-cols-10 gap-6">
                    <SectionCard
                        className="col-span-10 lg:col-span-6"
                        title="Catalog overview"
                    >
                        <div className="grid grid-cols-3">
                            {PYRAMID.map((item, index) => (
                                <Link
                                    key={item.key}
                                    href={item.href}
                                    className={cn(
                                        'flex cursor-pointer flex-col gap-0.5 px-4 py-4 transition-colors hover:bg-gray-50',
                                        index % 3 !== 0 &&
                                            'border-l border-gray-50',
                                        index < 3 && 'border-b border-gray-50',
                                    )}
                                >
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <span className="text-xl leading-none font-bold text-astara-purple">
                                                {formatCount(
                                                    totals[item.key] ?? 0,
                                                )}
                                            </span>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                            {item.href === '/models'
                                                ? 'Browse inside Models'
                                                : 'Browse variants'}
                                        </TooltipContent>
                                    </Tooltip>
                                    <span className="mt-1.5 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                        {item.label}
                                    </span>
                                </Link>
                            ))}
                        </div>
                        <div className="border-t border-gray-50 px-4 py-2.5 text-[10px] text-gray-400">
                            Counts per catalog table (COUNT per table, real
                            aggregates).
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-4"
                        title="Lifecycle status"
                    >
                        <div className="divide-y divide-gray-50">
                            {byStatus.map((row) => (
                                <div
                                    key={row.status}
                                    className="flex items-center justify-between px-4 py-2.5"
                                >
                                    <CatalogStatusBadge status={row.status} />
                                    <div className="flex items-center gap-4 text-[11px] font-bold text-astara-purple">
                                        <span>
                                            {formatCount(row.models)}{' '}
                                            <span className="text-[9px] font-semibold tracking-widest text-gray-400 uppercase">
                                                models
                                            </span>
                                        </span>
                                        <span className="w-24">
                                            {formatCount(row.variants)}{' '}
                                            <span className="text-[9px] font-semibold tracking-widest text-gray-400 uppercase">
                                                variants
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-6"
                        title="Brand distribution"
                        footer={
                            <Link
                                href={modelsIndex()}
                                prefetch="hover"
                                className="flex w-full cursor-pointer items-center justify-center gap-1.5 border-t border-gray-100 p-2.5 text-[10px] font-bold tracking-widest text-astara-orange uppercase transition-colors hover:bg-orange-50"
                            >
                                Browse models <ArrowRight size={12} />
                            </Link>
                        }
                    >
                        <div className="space-y-2.5 p-4">
                            {byBrand.map((row) => (
                                <Link
                                    key={row.brand_code}
                                    href={`/models?brand=${row.brand_code}`}
                                    className="group flex cursor-pointer items-center gap-3"
                                >
                                    <span className="w-32 shrink-0 truncate text-[10px] font-bold tracking-widest text-astara-purple uppercase group-hover:text-astara-orange">
                                        {brandLabel(row.brand_code)}
                                    </span>
                                    <div className="h-3 flex-1 overflow-hidden rounded-sm bg-gray-100">
                                        <div
                                            className="h-full rounded-sm bg-astara-orange transition-all group-hover:bg-astara-orange-hover"
                                            style={{
                                                width: `${(row.models / maxBrandModels) * 100}%`,
                                            }}
                                        />
                                    </div>
                                    <span className="w-10 text-right text-[10px] font-bold text-gray-500">
                                        {formatCount(row.models)}
                                    </span>
                                </Link>
                            ))}
                            {byBrand.length === 0 && (
                                <p className="text-[11px] text-gray-400">
                                    No brands imported yet.
                                </p>
                            )}
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-4"
                        title="Feature & data volume"
                        titleRight={
                            <Database size={14} className="text-gray-300" />
                        }
                    >
                        <div className="divide-y divide-gray-50">
                            <VolumeRow
                                label="Feature rows"
                                value={totals.entity_features ?? 0}
                            />
                            <VolumeRow
                                label="Data values"
                                value={totals.entity_data_values ?? 0}
                            />
                            <VolumeRow
                                label="Feature disclaimers"
                                value={totals.entity_feature_disclaimers ?? 0}
                            />
                        </div>
                        <div className="border-t border-gray-50 px-4 py-2.5">
                            <p className="mb-1.5 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                Availability split
                            </p>
                            <div className="flex flex-wrap gap-1.5">
                                {metrics.featureAvailability.map((row) => (
                                    <span
                                        key={row.availability ?? 'null'}
                                        className="inline-flex items-center gap-1 rounded bg-slate-100 px-2 py-0.5 text-[10px] font-bold text-slate-600"
                                    >
                                        {formatCount(row.count)}
                                        <span className="font-semibold text-gray-400">
                                            {row.availability ?? '—'}
                                        </span>
                                    </span>
                                ))}
                            </div>
                            <p className="mt-2 mb-1.5 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                Data values by entity type
                            </p>
                            <div className="flex flex-wrap gap-1.5">
                                {metrics.dataValuesByEntityType.map((row) => (
                                    <span
                                        key={row.entity_type}
                                        className="inline-flex items-center gap-1 rounded bg-slate-100 px-2 py-0.5 text-[10px] font-bold text-slate-600"
                                    >
                                        {formatCount(row.count)}
                                        <span className="font-semibold text-gray-400">
                                            {row.entity_type}
                                        </span>
                                    </span>
                                ))}
                            </div>
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-5"
                        title="Dictionaries"
                        titleRight={
                            <BookOpen size={14} className="text-gray-300" />
                        }
                    >
                        <div className="grid grid-cols-2 gap-x-4">
                            {DICTIONARIES.map((item) => (
                                <div
                                    key={item.key}
                                    className="flex items-center justify-between border-b border-gray-50 px-4 py-2"
                                >
                                    <span className="text-[10px] font-semibold tracking-wider text-gray-500 uppercase">
                                        {item.label}
                                    </span>
                                    <span className="text-[11px] font-bold text-astara-purple">
                                        {formatCount(totals[item.key] ?? 0)}
                                    </span>
                                </div>
                            ))}
                            <div className="flex items-center justify-between px-4 py-2">
                                <span className="text-[10px] font-semibold tracking-wider text-gray-500 uppercase">
                                    Brands
                                </span>
                                <span className="text-[11px] font-bold text-astara-purple">
                                    {formatCount(brands.length)}
                                </span>
                            </div>
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-5"
                        title="Data quality"
                        titleRight={
                            <AlertTriangle
                                size={14}
                                className="text-gray-300"
                            />
                        }
                    >
                        <div className="divide-y divide-gray-50">
                            <QualityRow
                                label="Price 0.00"
                                value={metrics.dataQuality.price_zero}
                            />
                            <QualityRow
                                label="Price 99999.00"
                                value={metrics.dataQuality.price_99999}
                            />
                            <QualityRow
                                label="Surcharge 99999999.00"
                                value={metrics.dataQuality.surcharge_99999999}
                            />
                            <QualityRow
                                label="Availability NULL"
                                value={metrics.dataQuality.availability_null}
                            />
                            <QualityRow
                                label="Reconstructed elements"
                                value={
                                    metrics.dataQuality.reconstructed_elements
                                }
                            />
                            <QualityRow
                                label="Trim features outside section catalog"
                                value={
                                    metrics.dataQuality
                                        .out_of_dictionary_trim_features
                                }
                                sub={`${metrics.dataQuality.out_of_dictionary_trim_percent.toLocaleString('de-CH')}% of trim feature rows`}
                            />
                        </div>
                        <div className="border-t border-gray-50 px-4 py-2.5 text-[10px] text-gray-400">
                            PCM anomalies preserved and counted — shown, not
                            interpreted.
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-5"
                        title="Locale coverage"
                        titleRight={
                            <Layers size={14} className="text-gray-300" />
                        }
                    >
                        <div className="divide-y divide-gray-50">
                            <LocaleRow
                                label="Models"
                                coverage={metrics.localeCoverage.models}
                            />
                            <LocaleRow
                                label="Structure elements"
                                coverage={
                                    metrics.localeCoverage.structure_elements
                                }
                            />
                        </div>
                        <div className="border-t border-gray-50 px-4 py-2.5 text-[10px] text-gray-400">
                            NULL-counted name_de / name_fr / name_it columns;
                            display resolves DE first (COALESCE).
                        </div>
                    </SectionCard>

                    <SectionCard
                        className="col-span-10 lg:col-span-5"
                        title="Latest import"
                        titleRight={
                            <History size={14} className="text-gray-300" />
                        }
                        footer={
                            <Link
                                href={importsIndex()}
                                prefetch="hover"
                                className="flex w-full cursor-pointer items-center justify-center gap-1.5 border-t border-gray-100 p-2.5 text-[10px] font-bold tracking-widest text-astara-orange uppercase transition-colors hover:bg-orange-50"
                            >
                                All import runs <ArrowRight size={12} />
                            </Link>
                        }
                    >
                        {latestImport === null ? (
                            <div className="px-4 py-6 text-[11px] text-gray-400">
                                No import runs yet — the catalog has not been
                                loaded.
                            </div>
                        ) : (
                            <div className="space-y-2.5 p-4">
                                <div className="flex items-center justify-between">
                                    <span className="text-xs font-bold text-astara-purple">
                                        Run #{latestImport.id}
                                    </span>
                                    <span
                                        className={cn(
                                            'inline-flex h-[18px] items-center justify-center rounded px-2 text-[9px] leading-none font-bold uppercase',
                                            IMPORT_STATUS_STYLES[
                                                latestImport.status
                                            ],
                                        )}
                                    >
                                        {latestImport.status}
                                    </span>
                                </div>
                                <div className="flex items-center justify-between text-[11px]">
                                    <span className="text-gray-400">
                                        API version
                                    </span>
                                    <span className="font-mono text-[11px] font-semibold text-astara-purple">
                                        {latestImport.api_version ?? '—'}
                                    </span>
                                </div>
                                <div className="flex items-center justify-between text-[11px]">
                                    <span className="text-gray-400">
                                        Started
                                    </span>
                                    <span className="font-semibold text-gray-600">
                                        {formatDateTime(
                                            latestImport.started_at,
                                        )}
                                    </span>
                                </div>
                                <div className="flex items-center justify-between text-[11px]">
                                    <span className="text-gray-400">
                                        Finished
                                    </span>
                                    <span className="font-semibold text-gray-600">
                                        {formatDateTime(
                                            latestImport.finished_at,
                                        )}
                                    </span>
                                </div>
                                {latestImport.notes && (
                                    <p className="border-t border-gray-50 pt-2 text-[10px] leading-relaxed text-gray-400 italic">
                                        {latestImport.notes}
                                    </p>
                                )}
                            </div>
                        )}
                    </SectionCard>
                </div>
            </div>
        </div>
    );
}

function VolumeRow({ label, value }: { label: string; value: number }) {
    return (
        <div className="flex items-center justify-between px-4 py-3">
            <span className="text-[10px] font-semibold tracking-wider text-gray-500 uppercase">
                {label}
            </span>
            <span className="text-sm font-bold text-astara-purple">
                {formatCount(value)}
            </span>
        </div>
    );
}

function QualityRow({
    label,
    value,
    sub,
}: {
    label: string;
    value: number;
    sub?: string;
}) {
    return (
        <div className="flex items-center justify-between px-4 py-2.5">
            <div>
                <p className="text-[10px] font-semibold tracking-wider text-gray-500 uppercase">
                    {label}
                </p>
                {sub && (
                    <p className="mt-0.5 text-[9px] text-gray-400">{sub}</p>
                )}
            </div>
            <span className="text-[11px] font-bold text-amber-600">
                {formatCount(value)}
            </span>
        </div>
    );
}

function LocaleRow({
    label,
    coverage,
}: {
    label: string;
    coverage: { total: number; de: number; fr: number; it: number };
}) {
    return (
        <div className="flex items-center justify-between px-4 py-2.5">
            <span className="text-[10px] font-semibold tracking-wider text-gray-500 uppercase">
                {label}
            </span>
            <div className="flex items-center gap-1.5">
                {(
                    [
                        ['DE', coverage.de],
                        ['FR', coverage.fr],
                        ['IT', coverage.it],
                    ] as const
                ).map(([locale, count]) => (
                    <span
                        key={locale}
                        className="inline-flex items-center gap-1 rounded bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold text-slate-600"
                    >
                        {formatCount(count)}/{formatCount(coverage.total)}
                        <span className="font-semibold text-gray-400">
                            {locale}
                        </span>
                    </span>
                ))}
            </div>
        </div>
    );
}