import { Link } from '@inertiajs/react';
import { ChevronLeft } from 'lucide-react';
import {
    LocaleCoverageChips,
    LocaleFallbackChip,
} from '@/components/shared/locale-chips';
import { LocaleSwitch } from '@/components/shared/locale-switch';
import { SectionCard } from '@/components/shared/section-card';
import { useCatalogLocale } from '@/hooks/use-catalog-locale';
import { formatCount, pickLocalizedName } from '@/lib/catalog';
import { cn } from '@/lib/utils';
import { index as structureIndex } from '@/routes/catalog/structure';
import type {
    CatalogElementDetailProps,
    CatalogElementType,
} from '@/types/catalog';

const ELEMENT_TYPE_STYLES: Record<CatalogElementType, string> = {
    feature: 'bg-green-50 text-green-700',
    data: 'bg-orange-50 text-amber-700',
    sub_category: 'bg-slate-100 text-slate-600',
};

export function StructureElementView({ element }: CatalogElementDetailProps) {
    const locale = useCatalogLocale();

    const elementName = pickLocalizedName(element, locale, element.name);

    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={structureIndex()}
                            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} /> Structure
                        </Link>
                    </div>
                    <div className="flex items-center gap-2.5">
                        <h2 className="text-2xl font-bold text-astara-purple">
                            {elementName.text}
                        </h2>
                        {elementName.fellBack && (
                            <LocaleFallbackChip
                                requested={locale}
                                used={elementName.locale}
                            />
                        )}
                        <span className="font-mono text-[11px] text-gray-400">
                            {element.code}
                        </span>
                    </div>
                    <p className="mt-1 text-[11px] font-bold tracking-widest text-gray-500 uppercase">
                        Structure element detail
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <LocaleCoverageChips names={element} />
                    <span
                        className={cn(
                            'inline-flex h-[18px] items-center rounded px-2 text-[9px] leading-none font-bold uppercase',
                            ELEMENT_TYPE_STYLES[element.element_type],
                        )}
                    >
                        {element.element_type}
                    </span>
                    <LocaleSwitch />
                </div>
            </header>

            <div className="space-y-6 p-6">
                <SectionCard title="Where used">
                    {element.categories.length === 0 ? (
                        <div className="px-4 py-6 text-[11px] text-gray-400">
                            No categories contain this element (reconstructed or
                            orphaned element).
                        </div>
                    ) : (
                        <div className="divide-y divide-gray-50">
                            {element.categories.map((category) => (
                                <Link
                                    key={category.id}
                                    href={structureIndex()}
                                    prefetch="hover"
                                    className="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 transition-colors hover:bg-gray-50"
                                >
                                    <span className="font-mono text-[11px] text-astara-purple">
                                        {category.code}
                                    </span>
                                    <span className="truncate text-[11px] font-semibold text-gray-600">
                                        {category.name}
                                    </span>
                                </Link>
                            ))}
                        </div>
                    )}
                </SectionCard>

                <SectionCard title="Dictionary coverage">
                    <div className="divide-y divide-gray-50">
                        <CoverageRow
                            label="Feature rows with this code"
                            value={element.entity_features_count}
                        />
                        <CoverageRow
                            label="Data values with this code"
                            value={element.entity_data_values_count}
                        />
                    </div>
                </SectionCard>
            </div>
        </div>
    );
}

function CoverageRow({ label, value }: { label: string; value: 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>
            <span className="text-[11px] font-bold text-astara-purple">
                {formatCount(value)}
            </span>
        </div>
    );
}