/* global React */
// ============================================================
// Hidden component showcase route
// ============================================================

function ShowcaseSection() {
  const { t, lang } = useI18n();
  const toast = useToast();
  const [tabPill, setTabPill] = React.useState("a");
  const [tabSide, setTabSide] = React.useState("a");
  const [tabUnder, setTabUnder] = React.useState("a");
  const [drop, setDrop] = React.useState("zh");
  const [slider, setSlider] = React.useState(40);
  const [modal, setModal] = React.useState(false);
  const [heart, setHeart] = React.useState(false);
  const [textVal, setTextVal] = React.useState("");
  const [toggle, setTog] = React.useState(true);

  const Card = ({ title, children, span = 1 }) => (
    <div className="pk-card" style={{ padding: 20, gridColumn: `span ${span}` }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-soft)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 14 }}>{title}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>{children}</div>
    </div>
  );

  return (
    <div>
      <SectionHeader title={t("showcase.title")} subtitle={t("showcase.subtitle")} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        <Card title="01 · Buttons">
          <Button>主按钮</Button>
          <Button variant="secondary">次按钮</Button>
          <Button variant="ghost">幽灵</Button>
          <Button variant="danger" leftIcon={<Icon name="trash" size={14} />}>危险</Button>
          <Button disabled>不可用</Button>
          <Button loading>加载中</Button>
          <IconButton label="set"><Icon name="settings" /></IconButton>
        </Card>

        <Card title="02 · Inputs">
          <div style={{ display: "grid", gap: 10, width: "100%" }}>
            <Input value={textVal} onChange={(e) => setTextVal(e.target.value)} placeholder="单行" prefixIcon={<Icon name="search" size={14} />} clearable />
            <Input multiline rows={2} placeholder="多行可输入..." />
            <Input value="error state" onChange={() => {}} error="不能为空" />
          </div>
        </Card>

        <Card title="03 · Choice cards">
          <ChoiceCard shape="round" selected size={64}><PandaGlyph size={40} /></ChoiceCard>
          <ChoiceCard shape="round" size={64}><PandaGlyph size={40} /></ChoiceCard>
          <ChoiceCard shape="square" selected size={72}>
            <PandaSVG traits={{ ...DEFAULT_TRAITS, eye: "sparkle" }} size={64} showText={false} style={{ background: "transparent" }} />
          </ChoiceCard>
          <ChoiceCard shape="square" size={72}>
            <PandaSVG traits={DEFAULT_TRAITS} size={64} showText={false} style={{ background: "transparent" }} />
          </ChoiceCard>
        </Card>

        <Card title="04 · Tabs">
          <div style={{ display: "grid", gap: 14, width: "100%" }}>
            <Tabs value={tabUnder} onChange={setTabUnder} items={[
              { value: "a", label: "下划线" }, { value: "b", label: "选项" }, { value: "c", label: "示例" },
            ]} />
            <Tabs variant="pill" value={tabPill} onChange={setTabPill} items={[
              { value: "a", label: "胶囊" }, { value: "b", label: "选项" }, { value: "c", label: "示例" },
            ]} />
            <div style={{ width: 200 }}>
              <Tabs variant="side" value={tabSide} onChange={setTabSide} items={[
                { value: "a", label: "侧栏 A", icon: <Icon name="layers" size={16} /> },
                { value: "b", label: "侧栏 B", icon: <Icon name="brush" size={16} /> },
                { value: "c", label: "侧栏 C", icon: <Icon name="zap" size={16} /> },
              ]} />
            </div>
          </div>
        </Card>

        <Card title="05 · Dropdown">
          <div style={{ width: 220 }}>
            <Dropdown value={drop} onChange={setDrop} searchable options={[
              { value: "zh", label: "中文（简体）" },
              { value: "en", label: "English" },
              { value: "ja", label: "日本語" },
              { value: "ko", label: "한국어" },
            ]} />
          </div>
        </Card>

        <Card title="06 · Slider">
          <div style={{ width: "100%", maxWidth: 360 }}>
            <Slider value={slider} onChange={setSlider} ticks={5} leftLabel="低" rightLabel="高" />
            <div style={{ marginTop: 6, fontSize: 12, color: "var(--text-soft)" }}>当前 {slider}</div>
          </div>
        </Card>

        <Card title="07 · Toasts">
          <Button size="sm" onClick={() => toast.push("信息提示", "info")}>info</Button>
          <Button size="sm" variant="secondary" onClick={() => toast.push("已完成", "success")}>success</Button>
          <Button size="sm" variant="secondary" onClick={() => toast.push("注意", "warn")}>warn</Button>
          <Button size="sm" variant="danger" onClick={() => toast.push("出错了", "error")}>error</Button>
        </Card>

        <Card title="08 · Modal">
          <Button onClick={() => setModal(true)}>打开 modal</Button>
          <Modal
            open={modal}
            onClose={() => setModal(false)}
            title="确认操作"
            footer={<>
              <Button variant="ghost" onClick={() => setModal(false)}>取消</Button>
              <Button onClick={() => setModal(false)}>确认</Button>
            </>}
          >
            <div style={{ color: "var(--text-soft)", fontSize: 14, lineHeight: 1.6 }}>
              这是一个确认 dialog。点击空白处或右上角 × 关闭。
            </div>
          </Modal>
        </Card>

        <Card title="09 · Tooltips">
          <Tooltip content="深色 tooltip"><Button variant="secondary" size="sm">悬浮看看</Button></Tooltip>
          <Tooltip variant="light" content="浅色 tooltip"><Button variant="secondary" size="sm">浅色版</Button></Tooltip>
        </Card>

        <Card title="10 · Empty state" span={2}>
          <div style={{ width: "100%" }}>
            <EmptyState
              title="还没有内容"
              body="去快速生图里点 ♥ 把表情加进来。"
              action={<Button leftIcon={<Icon name="plus" size={14} />}>去生图</Button>}
            />
          </div>
        </Card>

        <Card title="11 · Skeleton">
          <div style={{ display: "grid", gap: 8, width: "100%", maxWidth: 320 }}>
            <Skeleton width={140} height={14} />
            <Skeleton width="80%" height={12} />
            <Skeleton width="60%" height={12} />
            <Skeleton width="100%" height={80} rounded={12} />
          </div>
        </Card>

        <Card title="12 · Heart">
          <HeartButton active={heart} onChange={setHeart} label="收藏" size={28} />
          <span style={{ fontSize: 12, color: "var(--text-soft)" }}>{heart ? "已收藏" : "未收藏"}</span>
        </Card>

        <Card title="13 · Polaroid frame">
          <PolaroidFrame width={140} tilt={-3} caption="2024">
            <PandaSVG traits={{ ...DEFAULT_TRAITS, eye: "sparkle", hat: "crown" }} size={116} />
          </PolaroidFrame>
          <PolaroidFrame width={140} tilt={4} caption="阴阳人" selected onSelectToggle={() => {}}>
            <PandaSVG traits={{ ...DEFAULT_TRAITS, eye: "stare", mouth: "smirk" }} size={116} />
          </PolaroidFrame>
        </Card>

        <Card title="14 · Step card">
          <div style={{ width: "100%" }}>
            <StepCard n={1} title="找到 Bot" body="Telegram 搜 @Stickers，开始对话。" />
            <StepCard n={2} title="发送 /newpack" body="给表情包起个名字。" image={false} />
          </div>
        </Card>

        <Card title="15 · Toggle">
          <Toggle checked={toggle} onChange={setTog} />
          <span style={{ fontSize: 12, color: "var(--text-soft)" }}>{toggle ? "ON" : "OFF"}</span>
        </Card>

        <Card title="16 · Scrollbars">
          <div className="pk-rail" style={{ width: "100%", display: "flex", gap: 10, overflowX: "auto", padding: "10px 0" }}>
            {Array.from({ length: 14 }).map((_, i) => (
              <div key={i} style={{ flexShrink: 0, width: 80, height: 60, background: "var(--bg-soft)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, color: "var(--text-soft)" }}>
                #{i + 1}
              </div>
            ))}
          </div>
        </Card>

        <Card title="17 · Kbd">
          <Kbd>R</Kbd> <span style={{ color: "var(--text-soft)", fontSize: 12 }}>随机</span>
          <Kbd>C</Kbd> <span style={{ color: "var(--text-soft)", fontSize: 12 }}>复制</span>
          <Kbd>D</Kbd> <span style={{ color: "var(--text-soft)", fontSize: 12 }}>下载</span>
          <Kbd>F</Kbd> <span style={{ color: "var(--text-soft)", fontSize: 12 }}>收藏</span>
        </Card>
      </div>
    </div>
  );
}

window.ShowcaseSection = ShowcaseSection;