import { Input } from "@/components/ui/input";
import { CardEditGroup, CardEditPanel } from "./CardEditLayout";
import { CompetitionPanelForm } from "./CompetitionPanelForm";
import { EmojiPickerField } from "./EmojiPickerField";
import {
    defaultCompetitionTabsContent,
} from "@/components/page-blocks/competition/defaults";
import {
    newCompetitionTab,
    parseCompetitionPanelContent,
    parseCompetitionTabsContent,
    serializeCompetitionPanel,
} from "@/components/page-blocks/competition/parseContent";
import type { CompetitionTab } from "@/components/page-blocks/competition/types";

type BlockContent = Record<string, unknown>;

const formRow = "mb-4";
const labelCls = "block text-sm font-medium text-slate-700 mb-1.5";

type CompetitionTabsFormProps = {
    content: BlockContent;
    onChange: (content: BlockContent) => void;
};

function serializeTabs(tabs: CompetitionTab[], defaultTabId: string, showCounts: boolean): BlockContent {
    return {
        defaultTabId,
        showCounts,
        tabs: tabs.map((tab) => ({
            id: tab.id,
            label: tab.label,
            icon: tab.icon,
            panel: serializeCompetitionPanel(tab.panel),
        })),
    };
}

export function CompetitionTabsForm({ content, onChange }: CompetitionTabsFormProps) {
    const parsed = parseCompetitionTabsContent(content);
    const tabs = parsed.tabs.length > 0 ? parsed.tabs : defaultCompetitionTabsContent().tabs;

    const commit = (nextTabs: CompetitionTab[], defaultTabId = parsed.defaultTabId, showCounts = parsed.showCounts) => {
        const safeDefault = nextTabs.some((tab) => tab.id === defaultTabId)
            ? defaultTabId
            : nextTabs[0]?.id || "orion";
        onChange(serializeTabs(nextTabs, safeDefault, showCounts));
    };

    const updateTab = (index: number, patch: Partial<CompetitionTab>) => {
        commit(tabs.map((tab, i) => (i === index ? { ...tab, ...patch } : tab)));
    };

    const moveTab = (index: number, direction: -1 | 1) => {
        const target = index + direction;
        if (target < 0 || target >= tabs.length) return;
        const next = [...tabs];
        [next[index], next[target]] = [next[target], next[index]];
        commit(next);
    };

    return (
        <>
            <p className="text-[11px] text-amber-900 mb-4 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2">
                Legacy component: tab navigation now lives in <strong>Grade Hero → Competition Navigation</strong>.
                Prefer separate <strong>Orion Competitions</strong> and <strong>Public Competitions</strong> blocks
                on the page. This form still edits nested panel content for older pages; the live renderer no longer
                draws a second tab bar.
            </p>

            <div className={formRow}>
                <label className={labelCls}>Default active tab</label>
                <select
                    value={parsed.defaultTabId}
                    onChange={(e) => commit(tabs, e.target.value, parsed.showCounts)}
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                >
                    {tabs.map((tab) => (
                        <option key={tab.id} value={tab.id}>
                            {tab.label || tab.id}
                        </option>
                    ))}
                </select>
            </div>

            <div className={formRow}>
                <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
                    <input
                        type="checkbox"
                        checked={parsed.showCounts}
                        onChange={(e) => commit(tabs, parsed.defaultTabId, e.target.checked)}
                    />
                    Show competition counts on tab buttons
                </label>
            </div>

            <div className={formRow}>
                <CardEditGroup
                    label="Tabs"
                    layout="vertical"
                    onAdd={() => commit([...tabs, newCompetitionTab(tabs.length)])}
                    addLabel="Add tab"
                    hint="Add more tabs later without changing the architecture. Each tab has its own timeline content."
                >
                    {tabs.map((tab, index) => (
                        <CardEditPanel
                            key={tab.id}
                            index={index}
                            total={tabs.length}
                            layout="vertical"
                            label={tab.label || `Tab ${index + 1}`}
                            preview={{
                                emoji: tab.icon || "🏆",
                                title: tab.label,
                                subtitle: `${tab.panel.competitions.length} competitions`,
                            }}
                            onMoveUp={index > 0 ? () => moveTab(index, -1) : undefined}
                            onMoveDown={index < tabs.length - 1 ? () => moveTab(index, 1) : undefined}
                            onInsertAfter={() =>
                                commit([
                                    ...tabs.slice(0, index + 1),
                                    newCompetitionTab(index + 1),
                                    ...tabs.slice(index + 1),
                                ])
                            }
                            onRemove={
                                tabs.length > 1
                                    ? () => commit(tabs.filter((_, i) => i !== index))
                                    : undefined
                            }
                        >
                            <div className="flex gap-2 flex-wrap">
                                <div>
                                    <label className={labelCls}>Tab icon</label>
                                    <EmojiPickerField
                                        compact
                                        value={tab.icon}
                                        onChange={(value) => updateTab(index, { icon: value })}
                                    />
                                </div>
                                <div className="flex-1 min-w-[180px]">
                                    <label className={labelCls}>Tab label</label>
                                    <Input
                                        value={tab.label}
                                        onChange={(e) => updateTab(index, { label: e.target.value })}
                                    />
                                </div>
                                <div className="w-40">
                                    <label className={labelCls}>Tab id</label>
                                    <Input
                                        value={tab.id}
                                        onChange={(e) => updateTab(index, { id: e.target.value.trim() || tab.id })}
                                        className="font-mono text-sm"
                                    />
                                </div>
                            </div>

                            <div className="mt-4 rounded-lg border border-slate-200 bg-white p-3">
                                <p className="text-xs font-semibold text-slate-700 mb-3">
                                    {tab.label || `Tab ${index + 1}`} content
                                </p>
                                <CompetitionPanelForm
                                    content={serializeCompetitionPanel(tab.panel)}
                                    onChange={(panelContent) => {
                                        updateTab(index, {
                                            panel: parseCompetitionPanelContent(
                                                panelContent,
                                                tab.panel,
                                            ),
                                        });
                                    }}
                                    variant={tab.id === "public" || index === 1 ? "public" : "orion"}
                                    showHeaderHint={false}
                                />
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>
        </>
    );
}