import { createFileRoute } from "@tanstack/react-router";
import { Container, Group, Stack, Text, Title } from "@mantine/core";
import { Check, Cloud, Download, Send, Settings, Trash2, Upload } from "lucide-react";
import { useState } from "react";
import {
    Badge,
    Button,
    IconButton,
    Panel,
    Tabs,
    TextArea,
    TextField,
    Tooltip,
} from "../ui/primitives";
import { DeviceTypeIcon, StateDot } from "../ui/glyphs";
import type { DeviceKind } from "../ui/glyphs";
import type { ThemeMode } from "../store";
import { useAppStore } from "../store";
import { toast } from "../ui/feedback";

export const Route = createFileRoute("/styleguide")({ component: StyleGuide });

// 临时路由：M2 验收页。展示所有原子组件在 light / dark 主题下的表现。
function StyleGuide()
{
    const theme = useAppStore((s) => s.theme);
    const setTheme = useAppStore((s) => s.setTheme);
    const [ tab, setTab ] = useState<"file" | "message">("file");

    return (
        <Container size="lg" py="lg">
            <Stack gap="lg">
                <Group justify="space-between" align="baseline">
                    <Title order={3} fw={600}>cdrop · UI 原子组件总览</Title>
                    <Group gap="xs">
                        <Text size="xs" c="dimmed">当前主题：</Text>
                        <Tabs<ThemeMode>
                            items={[
                                { value: "light",  label: "Light" },
                                { value: "dark",   label: "Dark" },
                                { value: "system", label: "System" },
                            ]}
                            value={theme}
                            onChange={setTheme}
                            aria-label="theme switch"
                        />
                    </Group>
                </Group>

                {/* ---- Button variants × sizes ---- */}
                <Panel title="Button">
                    <Stack gap="sm">
                        <Group gap="sm" wrap="wrap">
                            <Button variant="primary">Primary</Button>
                            <Button variant="secondary">Secondary</Button>
                            <Button variant="ghost">Ghost</Button>
                            <Button variant="danger">Danger</Button>
                            <Button variant="primary" disabled>Disabled</Button>
                            <Button variant="primary" loading>Loading</Button>
                        </Group>
                        <Group gap="sm" wrap="wrap">
                            <Button variant="primary" size="sm">Small</Button>
                            <Button variant="primary" size="md">Medium</Button>
                            <Button variant="primary" size="lg">Large</Button>
                        </Group>
                        <Group gap="sm" wrap="wrap">
                            <Button variant="primary" leftIcon={<Send size={14} />}>
                                发送
                            </Button>
                            <Button variant="secondary" leftIcon={<Download size={14} />}>
                                复制到本机
                            </Button>
                            <Button variant="ghost" leftIcon={<Trash2 size={14} />}>
                                清除
                            </Button>
                        </Group>
                    </Stack>
                </Panel>

                {/* ---- IconButton ---- */}
                <Panel title="IconButton">
                    <Group gap="sm">
                        <IconButton aria-label="settings" size="sm"><Settings size={14} /></IconButton>
                        <IconButton aria-label="settings" size="md"><Settings size={16} /></IconButton>
                        <IconButton aria-label="settings" size="lg"><Settings size={18} /></IconButton>
                        <IconButton aria-label="upload" selected><Upload size={16} /></IconButton>
                        <IconButton aria-label="disabled" disabled><Cloud size={16} /></IconButton>
                    </Group>
                </Panel>

                {/* ---- Field ---- */}
                <Panel title="Field（TextField · TextArea）">
                    <Stack gap="sm">
                        <TextField
                            label="设备名称"
                            placeholder="macbook-pro"
                            hint="此名称展示给你的其他设备。"
                            required
                        />
                        <TextField
                            label="只读"
                            value="alice@dev"
                            readOnly
                        />
                        <TextField
                            label="错误态"
                            defaultValue="x"
                            error="名称不能少于 2 个字符"
                        />
                        <TextArea
                            label="消息"
                            placeholder="键入消息（≤ 4 KB）"
                            hint="回车发送，Shift + 回车换行。"
                            rows={3}
                        />
                    </Stack>
                </Panel>

                {/* ---- Panel variants ---- */}
                <Panel title="Panel 变体">
                    <Group gap="sm" align="stretch" wrap="wrap">
                        <Panel variant="default" padding="tight" style={{ flex: 1, minWidth: 160 }}>
                            <Text size="sm">default</Text>
                        </Panel>
                        <Panel variant="raised" padding="tight" style={{ flex: 1, minWidth: 160 }}>
                            <Text size="sm">raised（hover/拖拽目标）</Text>
                        </Panel>
                        <Panel variant="sunken" padding="tight" style={{ flex: 1, minWidth: 160 }}>
                            <Text size="sm">sunken（嵌套次级）</Text>
                        </Panel>
                        <Panel variant="flat" padding="tight" style={{ flex: 1, minWidth: 160 }}>
                            <Text size="sm">flat（无阴影）</Text>
                        </Panel>
                    </Group>
                </Panel>

                {/* ---- Tabs ---- */}
                <Panel title="Tabs">
                    <Stack gap="sm">
                        <Tabs
                            items={[
                                { value: "file",    label: "文件" },
                                { value: "message", label: "消息" },
                            ]}
                            value={tab}
                            onChange={setTab}
                            aria-label="compose mode"
                        />
                        <Tabs
                            fullWidth
                            items={[
                                { value: "file",    label: "文件" },
                                { value: "message", label: "消息" },
                            ]}
                            value={tab}
                            onChange={setTab}
                            aria-label="compose mode wide"
                        />
                    </Stack>
                </Panel>

                {/* ---- Badge ---- */}
                <Panel title="Badge">
                    <Group gap="sm" wrap="wrap">
                        <Badge tone="neutral">neutral</Badge>
                        <Badge tone="accent">accent</Badge>
                        <Badge tone="online" dot>在线</Badge>
                        <Badge tone="warn">即将超时</Badge>
                        <Badge tone="error">失败</Badge>
                    </Group>
                </Panel>

                {/* ---- Tooltip ---- */}
                <Panel title="Tooltip（自 Mantine 重导出）">
                    <Group gap="sm">
                        <Tooltip label="发送文件到选中设备">
                            <Button variant="primary" leftIcon={<Send size={14} />}>悬停我</Button>
                        </Tooltip>
                        <Tooltip label="复制云端最新内容到本机剪贴板">
                            <IconButton aria-label="copy"><Download size={16} /></IconButton>
                        </Tooltip>
                    </Group>
                </Panel>

                {/* ---- StateDot ---- */}
                <Panel title="StateDot">
                    <Group gap="md" wrap="wrap">
                        {(["online","active","warn","error","offline"] as const).map((t) => (
                            <Group key={t} gap={6}>
                                <StateDot tone={t} />
                                <Text size="xs">{t}</Text>
                            </Group>
                        ))}
                    </Group>
                </Panel>

                {/* ---- Toast ---- */}
                <Panel title="Toast（右上角 · 进度条耗尽自动关闭 · hover 暂停）">
                    <Group gap="sm" wrap="wrap">
                        <Button
                            variant="secondary" size="sm"
                            onClick={() => toast.info("传输已开始", "screenshot.png → iphone-15")}
                        >Info</Button>
                        <Button
                            variant="secondary" size="sm"
                            onClick={() => toast.ok("已复制到本机剪贴板", "可以粘贴到其他应用")}
                        >Success</Button>
                        <Button
                            variant="secondary" size="sm"
                            onClick={() => toast.warn("中继容量即将耗尽", "全局缓冲 480 / 512 MiB")}
                        >Warning</Button>
                        <Button
                            variant="secondary" size="sm"
                            onClick={() => toast.error("连接失败", "ICE timeout 30s — 已切换中继路径重试")}
                        >Error</Button>
                        <Button
                            variant="ghost" size="sm"
                            onClick={() => toast.info("仅标题", undefined, 3000)}
                        >Title only · 3s</Button>
                        <Button
                            variant="ghost" size="sm"
                            onClick={() => toast.info("常驻不自动关闭", "duration=0,需手动 X 关闭", 0)}
                        >No auto-close</Button>
                    </Group>
                </Panel>

                {/* ---- DeviceTypeIcon ---- */}
                <Panel title="DeviceTypeIcon">
                    <Group gap="md" wrap="wrap">
                        {(["macos","windows","linux","ios","android","tablet","unknown"] as DeviceKind[]).map((k) => (
                            <Group key={k} gap={6}>
                                <DeviceTypeIcon kind={k} size={20} />
                                <Text size="xs">{k}</Text>
                                <Check size={12} style={{ opacity: 0 }} />
                            </Group>
                        ))}
                    </Group>
                </Panel>
            </Stack>
        </Container>
    );
}
