// ==========================================================================
// Components / Feedback 家族 — thumbnails + detail pages
// ==========================================================================
const { Demo: __Demo_fb, DocCard: __DocCard_fb, Bar: __Bar_fb, Spinner: __Spinner_fb, FieldLabel: __FieldLabel_fb, tfStyle: __tfStyle_fb } = window;
const Demo = __Demo_fb, DocCard = __DocCard_fb, Bar = __Bar_fb, Spinner = __Spinner_fb, FieldLabel = __FieldLabel_fb, tfStyle = __tfStyle_fb;

const T_Alert = () => (
  <div style={{ width: 170, border: "1.5px solid var(--success)", background: "var(--success-bg)", borderRadius: 4, padding: 6, display: "flex", gap: 6, alignItems: "center" }}>
    <Icon name="ok" size={14} color="var(--success)" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 3 }}>
      <Bar w="70%" h={4} c="var(--success)" />
      <Bar w="100%" h={3} c="var(--n-300)" />
    </div>
  </div>
);
const T_Backdrop = () => (
  <div style={{ width: 160, height: 80, background: "rgba(7,12,18,.6)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center" }}>
    <div style={{ width: 70, height: 40, background: "#fff", borderRadius: 4 }} />
  </div>
);
const T_Dialog = () => (
  <div style={{ width: 140, background: "#fff", border: "1px solid var(--blue-500)", borderRadius: 6, padding: 10, boxShadow: "var(--shadow-3)" }}>
    <Bar w="50%" h={5} c="var(--blue-500)" />
    <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 3 }}>
      <Bar w="100%" h={3} c="var(--n-300)" /><Bar w="80%" h={3} c="var(--n-300)" />
    </div>
    <div style={{ marginTop: 6, display: "flex", justifyContent: "flex-end" }}>
      <Bar w={30} h={10} c="var(--blue-500)" r={2} />
    </div>
  </div>
);
const T_Progress = () => (
  <div style={{ width: 170, display: "flex", alignItems: "center", gap: 8 }}>
    <div style={{ flex: 1, height: 6, background: "var(--n-200)", borderRadius: 999, overflow: "hidden" }}>
      <div style={{ width: "50%", height: "100%", background: "var(--blue-500)" }} />
    </div>
    <span style={{ fontSize: 10, color: "var(--blue-500)", fontWeight: 600 }}>50%</span>
  </div>
);
const T_Skeleton = () => (
  <div style={{ width: 170, display: "flex", gap: 6 }}>
    <div style={{ width: 36, height: 36, borderRadius: 4, background: "var(--n-200)" }} />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4, justifyContent: "center" }}>
      <Bar w="80%" h={5} c="var(--n-200)" /><Bar w="60%" h={4} c="var(--n-200)" />
    </div>
  </div>
);
const T_Toast = () => (
  <div style={{ width: 160, padding: "6px 10px", background: "#fff", border: "1px solid var(--blue-500)", borderRadius: 4, display: "flex", alignItems: "center", gap: 6, boxShadow: "var(--shadow-2)" }}>
    <Icon name="check" size={12} color="var(--blue-500)" />
    <Bar w="70%" h={3} c="var(--blue-500)" />
  </div>
);
const T_Snackbar = () => (
  <div style={{ width: 170, padding: "6px 10px", background: "var(--n-900)", color: "#fff", borderRadius: 4, display: "flex", alignItems: "center", gap: 6 }}>
    <Bar w="60%" h={3} c="rgba(255,255,255,.7)" />
    <span style={{ fontSize: 9, color: "var(--blue-300)", fontWeight: 600, marginLeft: "auto" }}>UNDO</span>
  </div>
);

// ---------- Detail Cards ----------
const DocFeedback = () => (
  <>
    <DocCard id="c-feedback-alert" en="Alert" intro="Alert 用於頁面內顯示需要使用者注意的訊息，會持續顯示直到使用者關閉。">
      <Demo title="變體 (Variants)">
        <div style={{ display: "flex", flexDirection: "column", gap: 10, width: "100%" }}>
          {[
            { c: "var(--info)", bg: "var(--info-bg)", icon: "info", t: "新版本可用", d: "v1.2 新增主題切換與快捷鍵。" },
            { c: "var(--success)", bg: "var(--success-bg)", icon: "ok", t: "儲存成功", d: "你的變更已儲存。" },
            { c: "#c97f00", bg: "var(--warning-bg)", icon: "warn", t: "配額即將用盡", d: "本月儲存空間已使用 92%。" },
            { c: "var(--error)", bg: "var(--error-bg)", icon: "err", t: "上傳失敗", d: "檔案大於 10MB，請重新嘗試。" },
          ].map((a, i) => (
            <div key={i} style={{ display: "flex", gap: 12, padding: "14px 16px", border: `1px solid ${a.c}`, background: a.bg, borderRadius: 8 }}>
              <Icon name={a.icon} size={20} color={a.c} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, color: a.c, fontSize: 14 }}>{a.t}</div>
                <div style={{ fontSize: 13, color: "var(--n-700)", marginTop: 2 }}>{a.d}</div>
              </div>
              <Icon name="x" size={16} color="var(--n-500)" style={{ cursor: "pointer" }} />
            </div>
          ))}
        </div>
      </Demo>
      <Demo title="含動作按鈕">
        <div style={{ display: "flex", gap: 12, padding: "14px 16px", border: `1px solid var(--info)`, background: "var(--info-bg)", borderRadius: 8, width: "100%" }}>
          <Icon name="info" size={20} color="var(--info)" />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, color: "var(--info)", fontSize: 14 }}>偵測到新版本</div>
            <div style={{ fontSize: 13, color: "var(--n-700)", marginTop: 2 }}>v1.2.0 已發佈，重新整理頁面即可套用。</div>
          </div>
          <B kind="outline" size="sm">立即更新</B>
        </div>
      </Demo>
    </DocCard>

    <DocCard id="c-feedback-backdrop" en="Backdrop" intro="背景遮罩用於將焦點集中於浮層元件 (Modal / Drawer / Dialog)。預設 60% 透明黑底。">
      <Demo title="基本用法">
        <div style={{ width: 320, height: 180, background: "rgba(7,12,18,.6)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Spinner size={32} />
        </div>
      </Demo>
      <Demo title="深淺差異">
        <div style={{ display: "flex", gap: 12 }}>
          {[0.3, 0.5, 0.7].map(o => (
            <div key={o} style={{ width: 100, height: 100, background: `rgba(7,12,18,${o})`, borderRadius: 8, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontFamily: "var(--ff-mono)" }}>{o * 100}%</div>
          ))}
        </div>
      </Demo>
    </DocCard>

    <DocCard id="c-feedback-dialog" en="Dialog" intro="對話框用於需要使用者明確回應的場景（確認刪除、收集資料）。比 Toast 更需要關注。">
      <Demo title="確認對話框"><DialogConfirm /></Demo>
      <Demo title="表單對話框"><DialogForm /></Demo>
    </DocCard>

    <DocCard id="c-feedback-progress" en="Progress bar" intro="進度條顯示任務完成度。已知總量用線性進度條，未知用 indeterminate (跑馬燈)。">
      <Demo title="線性 (Linear)">
        <div style={{ display: "flex", flexDirection: "column", gap: 14, width: 400 }}>
          {[20, 50, 75, 100].map(p => (
            <div key={p} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ flex: 1, height: 6, background: "var(--n-200)", borderRadius: 999, overflow: "hidden" }}>
                <div style={{ width: `${p}%`, height: "100%", background: p === 100 ? "var(--success)" : "var(--blue-500)" }} />
              </div>
              <span style={{ fontFamily: "var(--ff-mono)", fontSize: 12, color: "var(--n-700)", minWidth: 36, textAlign: "right" }}>{p}%</span>
            </div>
          ))}
        </div>
      </Demo>
      <Demo title="圓形 (Circular)">
        <CircleProgress p={25} /><CircleProgress p={62} /><CircleProgress p={87} /><CircleProgress p={100} />
      </Demo>
      <Demo title="不定 (Indeterminate)">
        <div style={{ width: 400, height: 6, background: "var(--n-200)", borderRadius: 999, overflow: "hidden", position: "relative" }}>
          <div style={{ width: "30%", height: "100%", background: "var(--blue-500)", borderRadius: 999, animation: "indet 1.5s linear infinite" }} />
          <style>{`@keyframes indet{0%{margin-left:-30%}100%{margin-left:100%}}`}</style>
        </div>
      </Demo>
    </DocCard>

    <DocCard id="c-feedback-skeleton" en="Skeleton" intro="骨架屏在資料載入時佔位，比 Spinner 更能傳達「即將出現的內容形狀」，減少視覺跳動感。">
      <Demo title="文字段落">
        <div style={{ width: 400, display: "flex", flexDirection: "column", gap: 10 }}>
          <Bar w="40%" h={14} c="var(--n-200)" r={4} />
          <Bar w="100%" h={10} c="var(--n-200)" r={4} />
          <Bar w="85%" h={10} c="var(--n-200)" r={4} />
          <Bar w="60%" h={10} c="var(--n-200)" r={4} />
        </div>
      </Demo>
      <Demo title="清單 (List Item)">
        <div style={{ display: "flex", flexDirection: "column", gap: 14, width: 400 }}>
          {[0, 1, 2].map(i => (
            <div key={i} style={{ display: "flex", gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--n-200)" }} />
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6, justifyContent: "center" }}>
                <Bar w="50%" h={12} c="var(--n-200)" r={4} />
                <Bar w="80%" h={10} c="var(--n-200)" r={4} />
              </div>
            </div>
          ))}
        </div>
      </Demo>
      <Demo title="卡片">
        <div style={{ width: 240, border: "1px solid var(--n-200)", borderRadius: 8, padding: 14 }}>
          <div style={{ height: 120, background: "var(--n-200)", borderRadius: 4 }} />
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
            <Bar w="70%" h={14} c="var(--n-200)" r={4} />
            <Bar w="100%" h={10} c="var(--n-200)" r={4} />
            <Bar w="50%" h={10} c="var(--n-200)" r={4} />
          </div>
        </div>
      </Demo>
    </DocCard>

    <DocCard id="c-feedback-toast" en="Toast" intro="Toast 是非阻擋的通知，幾秒後自動消失。適合操作回饋（已儲存、已複製）。">
      <Demo title="變體">
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { c: "var(--success)", icon: "ok", t: "已成功儲存" },
            { c: "var(--info)", icon: "info", t: "已連結至剪貼簿" },
            { c: "#c97f00", icon: "warn", t: "網路連線不穩定" },
            { c: "var(--error)", icon: "err", t: "操作失敗，請重試" },
          ].map((a, i) => (
            <div key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "#fff", border: `1px solid ${a.c}`, borderRadius: 8, boxShadow: "var(--shadow-2)", minWidth: 280 }}>
              <Icon name={a.icon} size={18} color={a.c} />
              <span style={{ fontSize: 13, color: "var(--n-800)" }}>{a.t}</span>
              <Icon name="x" size={14} color="var(--n-400)" style={{ marginLeft: "auto", cursor: "pointer" }} />
            </div>
          ))}
        </div>
      </Demo>
      <Demo title="觸發示範"><ToastTrigger /></Demo>
    </DocCard>

    <DocCard id="c-feedback-snackbar" en="Snackbar" intro="Snackbar 是底部的可互動式提示，常附帶 UNDO 按鈕，允許使用者反悔最近的操作。">
      <Demo title="基本用法">
        <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 16px", background: "var(--n-900)", color: "#fff", borderRadius: 6, minWidth: 320 }}>
          <span style={{ fontSize: 14, flex: 1 }}>已刪除「設計稿 V2」</span>
          <button style={{ background: "transparent", border: "none", color: "var(--blue-300)", fontSize: 13, fontWeight: 600, cursor: "pointer", textTransform: "uppercase", letterSpacing: ".05em" }}>復原</button>
          <Icon name="x" size={14} color="rgba(255,255,255,.6)" style={{ cursor: "pointer" }} />
        </div>
      </Demo>
      <Demo title="觸發示範"><SnackbarTrigger /></Demo>
    </DocCard>
  </>
);

// ---------- demo helpers ----------
const DialogConfirm = () => {
  const [open, setOpen] = React.useState(true);
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 540, height: 260, background: "var(--n-100)", borderRadius: 8 }}>
      {open && (
        <div style={{ position: "absolute", inset: 0, background: "rgba(7,12,18,.4)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ background: "#fff", borderRadius: 8, padding: 24, width: 380, boxShadow: "var(--shadow-4)" }}>
            <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
              <Icon name="warn" size={24} color="var(--warning)" />
              <div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>確認刪除？</div>
                <div style={{ fontSize: 13, color: "var(--n-600)", marginTop: 4 }}>此動作無法復原，所有相關資料將一併刪除。</div>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
              <B kind="outline" onClick={() => setOpen(false)}>取消</B>
              <B kind="filled" danger onClick={() => setOpen(false)}>確認刪除</B>
            </div>
          </div>
        </div>
      )}
      {!open && <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}><B kind="filled" onClick={() => setOpen(true)}>重新開啟對話框</B></div>}
    </div>
  );
};

const DialogForm = () => {
  const [open, setOpen] = React.useState(true);
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 540, height: 320, background: "var(--n-100)", borderRadius: 8 }}>
      {open && (
        <div style={{ position: "absolute", inset: 0, background: "rgba(7,12,18,.4)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ background: "#fff", borderRadius: 8, padding: 24, width: 380, boxShadow: "var(--shadow-4)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 600 }}>新增成員</div>
              <Icon name="x" size={18} color="var(--n-500)" style={{ cursor: "pointer" }} onClick={() => setOpen(false)} />
            </div>
            <FieldLabel>Email</FieldLabel>
            <input placeholder="member@example.com" style={tfStyle()} />
            <div style={{ marginTop: 12 }}>
              <FieldLabel>角色</FieldLabel>
              <Select options={["管理員", "編輯", "檢視"]} defaultIndex={1} width="100%" />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }}>
              <B kind="outline" onClick={() => setOpen(false)}>取消</B>
              <B kind="filled" onClick={() => setOpen(false)}>送出邀請</B>
            </div>
          </div>
        </div>
      )}
      {!open && <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}><B kind="filled" onClick={() => setOpen(true)}>重新開啟</B></div>}
    </div>
  );
};

const CircleProgress = ({ p, size = 56 }) => {
  const r = size / 2 - 4;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--n-200)" strokeWidth="4" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={p === 100 ? "var(--success)" : "var(--blue-500)"} strokeWidth="4" strokeDasharray={c} strokeDashoffset={c - (c * p) / 100} strokeLinecap="round" />
      </svg>
      <span style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: "var(--n-700)" }}>{p}%</span>
    </div>
  );
};

const ToastTrigger = () => {
  const [toasts, setToasts] = React.useState([]);
  const add = (t, type) => {
    const id = Date.now();
    setToasts(ts => [...ts, { id, t, type }]);
    setTimeout(() => setToasts(ts => ts.filter(x => x.id !== id)), 2400);
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, width: "100%" }}>
      <div style={{ display: "flex", gap: 8 }}>
        <B kind="filled" onClick={() => add("已成功儲存", "success")}>成功</B>
        <B kind="outline" onClick={() => add("已連結至剪貼簿", "info")}>資訊</B>
        <B kind="outline" onClick={() => add("網路連線不穩定", "warn")}>警示</B>
        <B kind="outline" onClick={() => add("操作失敗，請重試", "error")}>錯誤</B>
      </div>
      <div style={{ minHeight: 60, display: "flex", flexDirection: "column", gap: 6 }}>
        {toasts.map(({ id, t, type }) => {
          const map = { success: { c: "var(--success)", icon: "ok" }, info: { c: "var(--info)", icon: "info" }, warn: { c: "#c97f00", icon: "warn" }, error: { c: "var(--error)", icon: "err" } };
          const m = map[type];
          return (
            <div key={id} style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "#fff", border: `1px solid ${m.c}`, borderRadius: 8, boxShadow: "var(--shadow-2)", maxWidth: 320 }}>
              <Icon name={m.icon} size={18} color={m.c} />
              <span style={{ fontSize: 13 }}>{t}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const SnackbarTrigger = () => {
  const [bar, setBar] = React.useState(null);
  const trigger = () => {
    setBar("已刪除「設計稿 V2」");
    setTimeout(() => setBar(null), 3000);
  };
  return (
    <div style={{ width: "100%" }}>
      <B kind="filled" danger icon="trash" onClick={trigger}>刪除項目</B>
      <div style={{ marginTop: 14, minHeight: 50 }}>
        {bar && (
          <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 16px", background: "var(--n-900)", color: "#fff", borderRadius: 6, minWidth: 320 }}>
            <span style={{ fontSize: 14, flex: 1 }}>{bar}</span>
            <button onClick={() => setBar(null)} style={{ background: "transparent", border: "none", color: "var(--blue-300)", fontSize: 13, fontWeight: 600, cursor: "pointer", textTransform: "uppercase", letterSpacing: ".05em" }}>復原</button>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { T_Alert, T_Backdrop, T_Dialog, T_Progress, T_Skeleton, T_Toast, T_Snackbar, DocFeedback });