import { Deferred, Link, router, usePage } from '@inertiajs/react';
import { CarFront, ChevronDown, ChevronLeft } from 'lucide-react';
import { CatalogStatusBadge } from '@/components/shared/badges';
import {
    LocaleCoverageChips,
    LocaleFallbackChip,
} from '@/components/shared/locale-chips';
import { LocaleSwitch } from '@/components/shared/locale-switch';
import { SectionCard } from '@/components/shared/section-card';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { Skeleton } from '@/components/ui/skeleton';
import { Switch } from '@/components/ui/switch';
import { useCatalogLocale } from '@/hooks/use-catalog-locale';
import { brandLabel, formatCount, pickLocalizedName } from '@/lib/catalog';
import { cn } from '@/lib/utils';
import {
    flags as bodyTypeFlags,
    show as bodyTypeShow,
} from '@/routes/catalog/body-types';
import { index as modelsIndex } from '@/routes/catalog/models';
import type {
    CatalogModelDetail,
    CatalogModelsShowProps,
    ModelFeaturePreview,
} from '@/types/catalog';

export function ModelDetailView({
    model,
    feature_preview,
}: CatalogModelsShowProps) {
    const locale = useCatalogLocale();
    const { props } = usePage();
    const canEdit = props.auth.can.edit_catalog;

    const modelName = pickLocalizedName(model, locale, model.name);
    const yearsTotal = model.model_years.reduce(
        (sum, year) =>
            sum +
            year.body_types.reduce((s, body) => s + body.variants_count, 0),
        0,
    );

    return (
        <div className="custom-scroll flex-1 overflow-y-auto">
            <header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-gray-100 bg-white p-5">
                <div>
                    <div className="mb-1 flex items-center gap-2">
                        <Link
                            href={modelsIndex()}
                            prefetch="hover"
                            className="flex cursor-pointer items-center gap-1 text-[10px] font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-astara-orange"
                        >
                            <ChevronLeft size={12} /> Models
                        </Link>
                    </div>
                    <div className="flex items-center gap-2.5">
                        <h2 className="text-2xl font-bold text-astara-purple">
                            {modelName.text}
                        </h2>
                        {modelName.fellBack && (
                            <LocaleFallbackChip
                                requested={locale}
                                used={modelName.locale}
                            />
                        )}
                        <span className="font-mono text-[11px] text-gray-400">
                            {model.model_key}
                        </span>
                    </div>
                    <p className="mt-1 text-[11px] font-bold tracking-widest text-gray-500 uppercase">
                        {brandLabel(model.brand.code)} — Model detail
                    </p>
                    {/* P019/P006: all three names visible at once, no locale switch needed. */}
                    <div className="mt-2 flex flex-col gap-0.5">
                        {(['de', 'fr', 'it'] as const).map((code) => {
                            const name = model[`name_${code}`];

                            return (
                                <span
                                    key={code}
                                    className={cn(
                                        'flex items-center gap-1.5 text-[10px]',
                                        name
                                            ? 'font-semibold text-gray-600'
                                            : 'font-medium text-gray-300 italic',
                                    )}
                                >
                                    <span className="w-5 shrink-0 font-mono text-[8px] font-bold tracking-widest text-gray-400 uppercase">
                                        {code}
                                    </span>
                                    {name ?? '— not set'}
                                </span>
                            );
                        })}
                    </div>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                    <LocaleCoverageChips names={model} />
                    <CatalogStatusBadge status={model.status} />
                    <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: {model.market.code}
                    </span>
                    <LocaleSwitch />
                </div>
            </header>

            <div className="p-6">
                <SectionCard
                    title={`Model years — ${formatCount(model.model_years.length)}`}
                    titleRight={
                        <span className="text-[10px] font-bold text-gray-400">
                            {formatCount(yearsTotal)} variants in subtree
                        </span>
                    }
                    className="mb-6"
                >
                    <div className="divide-y divide-gray-50">
                        {model.model_years.map((year) => (
                            <ModelYearRow
                                key={year.id}
                                year={year}
                                modelId={model.id}
                                canEdit={canEdit}
                            />
                        ))}
                    </div>
                </SectionCard>

                <SectionCard title="Feature preview">
                    <Deferred
                        data={['feature_preview']}
                        fallback={<PreviewSkeleton />}
                    >
                        {feature_preview != null && (
                            <FeaturePreview preview={feature_preview} />
                        )}
                    </Deferred>
                </SectionCard>
            </div>
        </div>
    );
}

function ModelYearRow({
    year,
    modelId,
    canEdit,
}: {
    year: CatalogModelDetail['model_years'][number];
    modelId: number;
    canEdit: boolean;
}) {
    const locale = useCatalogLocale();
    const variantsCount = year.body_types.reduce(
        (sum, body) => sum + body.variants_count,
        0,
    );

    return (
        <Collapsible>
            <CollapsibleTrigger className="group flex w-full cursor-pointer items-center justify-between px-4 py-3 transition-colors hover:bg-gray-50">
                <div className="flex items-center gap-3">
                    <span className="font-mono text-xs font-bold text-astara-purple">
                        {year.year_key}
                    </span>
                    <CatalogStatusBadge status={year.status} />
                    <span className="text-[10px] font-semibold tracking-widest text-gray-400 uppercase">
                        {formatCount(year.body_types.length)} body types ·{' '}
                        {formatCount(variantsCount)} variants
                    </span>
                </div>
                <ChevronDown
                    size={14}
                    className="text-gray-300 transition-transform group-data-[state=open]:rotate-180"
                />
            </CollapsibleTrigger>
            <CollapsibleContent>
                <div className="divide-y divide-gray-50 border-t border-gray-50 bg-gray-50/50">
                    {year.body_types.length === 0 && (
                        <div className="px-4 py-3 text-[11px] text-gray-400">
                            No body types for this model year.
                        </div>
                    )}
                    {year.body_types.map((body) => {
                        const bodyName = pickLocalizedName(
                            body,
                            locale,
                            body.name,
                        );

                        return (
                            <div
                                key={body.id}
                                className="group/body flex w-full items-center transition-colors hover:bg-white"
                            >
                                <button
                                    type="button"
                                    onClick={() =>
                                        router.visit(
                                            bodyTypeShow({
                                                model: modelId,
                                                bodyType: body.id,
                                            }),
                                        )
                                    }
                                    className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-2.5 text-left"
                                >
                                    <span className="font-mono text-[11px] text-gray-400">
                                        {body.body_key}
                                    </span>
                                    <span className="w-40 truncate text-[11px] font-bold text-astara-purple group-hover/body:text-astara-orange">
                                        {bodyName.text}
                                    </span>
                                    {bodyName.fellBack && (
                                        <LocaleFallbackChip
                                            requested={locale}
                                            used={bodyName.locale}
                                        />
                                    )}
                                    <CatalogStatusBadge status={body.status} />
                                    {body.flag === 'New' && (
                                        <span className="inline-flex h-[16px] items-center rounded bg-yellow-50 px-1.5 text-[8px] font-bold tracking-wider text-amber-700 uppercase">
                                            New
                                        </span>
                                    )}
                                    {body.test_drive && (
                                        <span
                                            title="Test drive available"
                                            className="flex h-[16px] w-[16px] items-center justify-center rounded bg-green-50 text-green-700"
                                        >
                                            <CarFront size={10} />
                                        </span>
                                    )}
                                    {body.range_json.map((range) => (
                                        <span
                                            key={range}
                                            className="inline-flex h-[16px] items-center rounded border border-slate-200 bg-white px-1.5 text-[8px] font-semibold text-slate-600"
                                        >
                                            {range}
                                        </span>
                                    ))}
                                    <span className="ml-auto text-[10px] font-semibold text-gray-400">
                                        {formatCount(body.engines_count)}{' '}
                                        engines ·{' '}
                                        {formatCount(body.trims_count)} trims ·{' '}
                                        {formatCount(body.variants_count)}{' '}
                                        variants
                                    </span>
                                </button>
                                {canEdit && (
                                    <BodyTypeFlags
                                        modelId={modelId}
                                        bodyType={body}
                                    />
                                )}
                            </div>
                        );
                    })}
                </div>
            </CollapsibleContent>
        </Collapsible>
    );
}

/*
 * P016 — per-body-type Test Drive / Offer Request toggles (admin-only).
 * PATCHes the flags endpoint; the switches stay controlled by the Inertia
 * payload, so they reflect the persisted state after each save.
 */
function BodyTypeFlags({
    modelId,
    bodyType,
}: {
    modelId: number;
    bodyType: CatalogModelDetail['model_years'][number]['body_types'][number];
}) {
    const patchFlag = (flag: 'test_drive' | 'offer_request', value: boolean) =>
        router.patch(
            bodyTypeFlags({
                model: modelId,
                bodyType: bodyType.id,
            }) as never,
            { [flag]: value },
            { preserveScroll: true },
        );

    return (
        <div className="flex shrink-0 items-center gap-3 px-3">
            <label className="flex cursor-pointer items-center gap-1.5">
                <Switch
                    size="sm"
                    checked={bodyType.test_drive}
                    onCheckedChange={(checked) =>
                        patchFlag('test_drive', checked)
                    }
                    aria-label={`Test drive for ${bodyType.body_key}`}
                />
                <span className="text-[8px] font-bold tracking-widest text-gray-400 uppercase">
                    Test drive
                </span>
            </label>
            <label className="flex cursor-pointer items-center gap-1.5">
                <Switch
                    size="sm"
                    checked={bodyType.offer_request}
                    onCheckedChange={(checked) =>
                        patchFlag('offer_request', checked)
                    }
                    aria-label={`Offer request for ${bodyType.body_key}`}
                />
                <span className="text-[8px] font-bold tracking-widest text-gray-400 uppercase">
                    Offer request
                </span>
            </label>
        </div>
    );
}

/*
 * Feature preview (IA §4.3): subtree aggregates — total feature/data rows,
 * distinct codes and the top feature codes with their availability mix.
 */
function FeaturePreview({ preview }: { preview: ModelFeaturePreview }) {
    return (
        <div>
            <div className="grid grid-cols-2 gap-3 border-b border-gray-50 p-4 sm:grid-cols-4">
                <PreviewMetric
                    label="Feature rows"
                    value={preview.feature_rows}
                />
                <PreviewMetric
                    label="Data values"
                    value={preview.data_value_rows}
                />
                <PreviewMetric
                    label="Distinct feature codes"
                    value={preview.distinct_feature_codes}
                />
                <PreviewMetric
                    label="Distinct data codes"
                    value={preview.distinct_data_codes}
                />
            </div>
            {preview.top_codes.length === 0 ? (
                <div className="px-4 py-6 text-[11px] text-gray-400">
                    No feature rows in this model's subtree.
                </div>
            ) : (
                <div className="divide-y divide-gray-50">
                    {preview.top_codes.map((top) => (
                        <div
                            key={top.feature_code}
                            className="flex items-center gap-3 px-4 py-2.5"
                        >
                            <span className="font-mono text-[11px] text-astara-purple">
                                {top.feature_code}
                            </span>
                            <span className="text-[11px] font-bold text-gray-600">
                                {formatCount(top.total)}
                            </span>
                            <span className="text-[9px] font-semibold tracking-widest text-gray-400 uppercase">
                                rows
                            </span>
                            <span className="ml-auto flex flex-wrap items-center gap-1">
                                {Object.entries(top.availability).map(
                                    ([availability, count]) => (
                                        <span
                                            key={availability}
                                            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)}
                                            <span className="font-semibold text-gray-400">
                                                {availability === 'null'
                                                    ? '—'
                                                    : availability}
                                            </span>
                                        </span>
                                    ),
                                )}
                            </span>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}

function PreviewMetric({ label, value }: { label: string; value: number }) {
    return (
        <div>
            <p className="text-sm font-bold text-astara-purple">
                {formatCount(value)}
            </p>
            <p className="mt-0.5 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                {label}
            </p>
        </div>
    );
}

function PreviewSkeleton() {
    return (
        <div className="flex flex-col gap-2 p-4">
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-8 w-full" />
            <Skeleton className="h-8 w-full" />
        </div>
    );
}