import { router } from '@inertiajs/react';
import type { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';
import type { CustomCellRendererProps } from 'ag-grid-react';
import { useState } from 'react';
import { PageHeader } from '@/components/shared/page-header';
import { Pagination } from '@/components/shared/pagination';
import { astaraGridTheme } from '@/lib/ag-grid-theme';

interface Accessory {
    id: number;
    brand_code: string;
    code: string;
    name_de: string;
    price: string | null;
    active: boolean;
}

interface WarrantyRate {
    duration_months: number;
    price: string;
}

export function AccessoriesView({
    accessories,
    warrantyRates,
}: {
    accessories: Accessory[];
    warrantyRates: WarrantyRate[];
}) {
    const [columnDefs] = useState<ColDef<Accessory>[]>(() => [
        {
            colId: 'code',
            headerName: 'Code',
            field: 'code',
            width: 140,
            cellRenderer: (params: CustomCellRendererProps<Accessory>) => (
                <div className="flex h-full items-center font-mono text-[10px] text-gray-500">
                    {params.data?.code}
                </div>
            ),
        },
        {
            colId: 'name',
            headerName: 'Name',
            field: 'name_de',
            flex: 2,
            cellRenderer: (params: CustomCellRendererProps<Accessory>) => (
                <div className="flex h-full items-center overflow-hidden">
                    <span className="truncate text-xs font-bold text-astara-purple">
                        {params.data?.name_de}
                    </span>
                </div>
            ),
        },
        {
            colId: 'brand',
            headerName: 'Brand',
            field: 'brand_code',
            width: 110,
            cellRenderer: (params: CustomCellRendererProps<Accessory>) => (
                <div className="flex h-full items-center">
                    <span className="inline-flex h-[18px] items-center rounded bg-slate-100 px-2 text-[9px] leading-none font-bold tracking-widest text-slate-600 uppercase">
                        {params.data?.brand_code}
                    </span>
                </div>
            ),
        },
        {
            colId: 'price',
            headerName: 'Price (CHF)',
            field: 'price',
            width: 130,
            cellRenderer: (params: CustomCellRendererProps<Accessory>) => (
                <div className="flex h-full items-center justify-end text-[11px] font-bold text-gray-600 tabular-nums">
                    {params.data?.price ?? '–'}
                </div>
            ),
        },
    ]);

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <PageHeader
                title="Accessories"
                subtitle="Aftersales Accessories Database"
            />

            <div className="custom-scroll flex-1 space-y-6 overflow-y-auto p-4 md:p-6">
                <div className="overflow-hidden rounded-xl border border-[rgba(30,25,50,0.06)] bg-white shadow-[0_2px_8px_rgba(30,25,50,0.04)]">
                    <header className="border-b border-gray-100 bg-gray-50/50 px-4 py-2.5">
                        <h3 className="text-[11px] font-bold tracking-widest text-gray-500 uppercase">
                            Accessories
                        </h3>
                    </header>
                    <div className="h-[400px]">
                        <AgGridReact<Accessory>
                            theme={astaraGridTheme}
                            rowData={accessories}
                            columnDefs={columnDefs}
                            rowHeight={38}
                            headerHeight={36}
                            suppressCellFocus
                        />
                    </div>
                </div>

                {warrantyRates.length > 0 && (
                    <div className="overflow-hidden rounded-xl border border-[rgba(30,25,50,0.06)] bg-white shadow-[0_2px_8px_rgba(30,25,50,0.04)]">
                        <header className="border-b border-gray-100 bg-gray-50/50 px-4 py-2.5">
                            <h3 className="text-[11px] font-bold tracking-widest text-gray-500 uppercase">
                                Warranty Extension Rates
                            </h3>
                        </header>
                        <table className="w-full border-collapse">
                            <thead>
                                <tr className="border-b border-gray-100 bg-gray-50/50">
                                    <th
                                        scope="col"
                                        className="px-4 py-2 text-left text-[9px] font-bold tracking-widest text-gray-400 uppercase"
                                    >
                                        Duration
                                    </th>
                                    <th
                                        scope="col"
                                        className="px-4 py-2 text-right text-[9px] font-bold tracking-widest text-gray-400 uppercase"
                                    >
                                        Price (CHF)
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {warrantyRates.map((rate) => (
                                    <tr
                                        key={rate.duration_months}
                                        className="border-b border-gray-50"
                                    >
                                        <td className="px-4 py-1.5 text-[11px] font-semibold">
                                            {rate.duration_months} months
                                        </td>
                                        <td className="px-4 py-1.5 text-right text-[11px] tabular-nums">
                                            {rate.price}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}
            </div>
        </div>
    );
}