// System settings page

const SettingsPage = () => {
  const [section, setSection] = useState("general");
  const toast = useToast();

  const sections = [
    { key: "general", label: "一般設定", icon: "settings" },
    { key: "platform", label: "平台規則", icon: "flag" },
    { key: "fees", label: "費率設定", icon: "coin" },
    { key: "security", label: "安全與 MFA", icon: "shield" },
    { key: "notifications", label: "通知設定", icon: "bell" },
    { key: "api", label: "API & Webhook", icon: "key" },
  ];

  return (
    <div className="fade-in">
      <PageHeader title="系統設定" subtitle="平台全域設定 · 僅 Super Admin 可修改"/>
      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 24 }}>
        <div style={{ position: "sticky", top: 24, alignSelf: "start" }}>
          {sections.map(s => (
            <button key={s.key} onClick={() => setSection(s.key)} style={{
              display: "flex", alignItems: "center", gap: 10, width: "100%",
              padding: "9px 12px", borderRadius: 8, fontSize: 13.5, marginBottom: 2,
              background: section === s.key ? "var(--surface-2)" : "transparent",
              color: section === s.key ? "var(--ink)" : "var(--ink-2)",
              fontWeight: section === s.key ? 500 : 400, textAlign: "left",
            }}>
              <Icon name={s.icon} size={15} style={{ color: "var(--ink-3)" }}/>
              <span>{s.label}</span>
            </button>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {section === "general" && <GeneralSettings toast={toast}/>}
          {section === "fees" && <FeesSettings toast={toast}/>}
          {section === "security" && <SecuritySettings toast={toast}/>}
          {section === "platform" && <PlatformRulesSettings toast={toast}/>}
          {section === "notifications" && <PlaceholderPanel title="通知設定" desc="管理員提醒門檻、系統訊息模板、緊急事件推送通道。"/>}
          {section === "api" && <PlaceholderPanel title="API & Webhook" desc="金流 webhook、Email/SMS 服務商、第三方授權金鑰。"/>}
        </div>
      </div>
    </div>
  );
};

const SettingCard = ({ title, desc, children }) => (
  <Card padding={24}>
    <div style={{ marginBottom: 16 }}>
      <div style={{ fontSize: 15, fontWeight: 600 }}>{title}</div>
      {desc && <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 3 }}>{desc}</div>}
    </div>
    {children}
  </Card>
);

const SettingRow = ({ label, hint, children }) => (
  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0", borderTop: "1px solid var(--border)", gap: 16 }}>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</div>
      {hint && <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{hint}</div>}
    </div>
    <div style={{ flexShrink: 0 }}>{children}</div>
  </div>
);

const GeneralSettings = ({ toast }) => {
  const [maint, setMaint] = useState(false);
  return (
    <>
      <SettingCard title="平台資訊" desc="顯示於前台與系統通知中的基本資訊">
        <SettingRow label="平台名稱"><Input value="堆堆 DuiDui" onChange={()=>{}} style={{ width: 240 }}/></SettingRow>
        <SettingRow label="客服 Email"><Input value="support@duidui.app" onChange={()=>{}} style={{ width: 240 }}/></SettingRow>
        <SettingRow label="預設語言"><Select value="zh-TW" onChange={()=>{}} options={[{value:"zh-TW",label:"繁體中文"},{value:"zh-CN",label:"簡體中文"},{value:"en",label:"English"}]}/></SettingRow>
        <SettingRow label="時區"><Select value="tpe" onChange={()=>{}} options={[{value:"tpe",label:"Asia/Taipei (UTC+8)"}]}/></SettingRow>
      </SettingCard>

      <SettingCard title="維護模式" desc="開啟後前台將顯示維護頁面,僅管理員可登入">
        <SettingRow label="啟用維護模式" hint={maint ? "前台已停止服務" : "平台正常運作中"}>
          <Switch checked={maint} onChange={v => { setMaint(v); toast({ title: v ? "已進入維護模式" : "已結束維護", message: "操作已記錄", tone: v ? "warn" : "success" }); }}/>
        </SettingRow>
      </SettingCard>
    </>
  );
};

const FeesSettings = ({ toast }) => {
  const [vals, setVals] = useState(null);
  const [original, setOriginal] = useState(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    fetch("/api/admin/settings")
      .then(r => r.json())
      .then(data => {
        const defaults = { platform_fee: "15", payment_fee: "2.8", withdrawal_fee: "15", min_order_amount: "500", settlement_cycle: "14" };
        const merged = { ...defaults, ...data };
        setVals(merged);
        setOriginal(merged);
      });
  }, []);

  const set = (key, value) => setVals(prev => ({ ...prev, [key]: value }));

  const handleSave = async () => {
    setSaving(true);
    const res = await fetch("/api/admin/settings", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(vals),
    });
    setSaving(false);
    if (res.ok) {
      setOriginal(vals);
      toast({ title: "費率已更新", message: "新費率僅影響新訂單" });
    } else {
      toast({ title: "儲存失敗", message: "請稍後再試", tone: "danger" });
    }
  };

  if (!vals) return <Card padding={24}><div style={{ color: "var(--ink-3)", fontSize: 13 }}>載入中…</div></Card>;

  return (
    <SettingCard title="平台費率" desc="調整費率會影響所有新訂單 · 既有訂單維持原費率">
      <SettingRow label="平台抽成比例" hint="創作者分潤 = 100% − 此數值"><Input value={vals.platform_fee} onChange={e => set("platform_fee", e.target.value)} style={{ width: 90 }}/></SettingRow>
      <SettingRow label="金流手續費" hint="刷卡、ApplePay、LINE Pay"><Input value={vals.payment_fee} onChange={e => set("payment_fee", e.target.value)} style={{ width: 90 }}/></SettingRow>
      <SettingRow label="提領手續費" hint="創作者每次提領扣除"><Input value={vals.withdrawal_fee} onChange={e => set("withdrawal_fee", e.target.value)} style={{ width: 90 }}/></SettingRow>
      <SettingRow label="最低訂單金額"><Input value={vals.min_order_amount} onChange={e => set("min_order_amount", e.target.value)} style={{ width: 120 }}/></SettingRow>
      <SettingRow label="結算週期"><Select value={vals.settlement_cycle} onChange={e => set("settlement_cycle", e.target.value)} options={[{value:"7",label:"每週"},{value:"14",label:"每雙週"},{value:"30",label:"每月"}]}/></SettingRow>
      <div style={{ marginTop: 16, display: "flex", justifyContent: "flex-end", gap: 8 }}>
        <Button variant="secondary" onClick={() => setVals(original)}>取消</Button>
        <Button variant="primary" onClick={handleSave}>{saving ? "儲存中…" : "儲存並套用"}</Button>
      </div>
    </SettingCard>
  );
};

const SecuritySettings = ({ toast }) => (
  <>
    <SettingCard title="管理員安全策略">
      <SettingRow label="強制 MFA" hint="所有管理員登入必須通過 Email OTP 驗證"><Switch checked onChange={()=>{}}/></SettingRow>
      <SettingRow label="Session 逾時" hint="閒置後自動登出"><Select value="60" onChange={()=>{}} options={[{value:"30",label:"30 分鐘"},{value:"60",label:"60 分鐘"},{value:"240",label:"4 小時"}]}/></SettingRow>
      <SettingRow label="IP 白名單" hint="僅允許指定 IP 存取後台"><Switch checked={false} onChange={()=>{}}/></SettingRow>
      <SettingRow label="密碼週期" hint="強制密碼更換間隔"><Select value="90" onChange={()=>{}} options={[{value:"0",label:"不強制"},{value:"90",label:"90 天"},{value:"180",label:"180 天"}]}/></SettingRow>
    </SettingCard>
    <SettingCard title="敏感資料存取">
      <SettingRow label="查看明碼需 MFA" hint="查看電話、銀行帳號等敏感資料時再次驗證"><Switch checked onChange={()=>{}}/></SettingRow>
      <SettingRow label="匯出資料需授權" hint="匯出超過 100 筆敏感資料需主管審核"><Switch checked onChange={()=>{}}/></SettingRow>
      <SettingRow label="資料存取自動記錄" hint="所有敏感資料查看將寫入審計日誌"><Switch checked disabled onChange={()=>{}}/></SettingRow>
    </SettingCard>
  </>
);

const PLATFORM_RULE_KEYS = [
  { key: "rule_tos",      label: "服務條款",     placeholder: "請輸入服務條款內容…" },
  { key: "rule_refund",   label: "退款政策",     placeholder: "請輸入退款政策內容…" },
  { key: "rule_content",  label: "內容審核規則", placeholder: "請輸入內容審核規則…" },
  { key: "rule_banned",   label: "禁用詞彙",     placeholder: "每行一個詞彙…" },
];

const PlatformRulesSettings = ({ toast }) => {
  const [vals, setVals] = useState({});
  const [original, setOriginal] = useState({});
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [activeRule, setActiveRule] = useState(PLATFORM_RULE_KEYS[0].key);

  useEffect(() => {
    setLoading(true);
    fetch("/api/admin/settings")
      .then(r => r.json())
      .then(data => {
        const defaults = Object.fromEntries(PLATFORM_RULE_KEYS.map(r => [r.key, ""]));
        const merged = { ...defaults, ...data };
        setVals(merged);
        setOriginal(merged);
      })
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async () => {
    setSaving(true);
    const payload = Object.fromEntries(PLATFORM_RULE_KEYS.map(r => [r.key, vals[r.key] ?? ""]));
    const res = await fetch("/api/admin/settings", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setSaving(false);
    if (res.ok) {
      setOriginal(vals);
      toast({ title: "平台規則已儲存", message: "變更立即生效", icon: "check" });
    } else {
      toast({ title: "儲存失敗", message: "請稍後再試", tone: "danger" });
    }
  };

  const current = PLATFORM_RULE_KEYS.find(r => r.key === activeRule);
  const changed = PLATFORM_RULE_KEYS.some(r => vals[r.key] !== original[r.key]);

  if (loading) return <Card padding={24}><div style={{ color: "var(--ink-3)", fontSize: 13 }}>載入中…</div></Card>;

  return (
    <Card padding={0} style={{ overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr" }}>
        {/* Left rule list */}
        <div style={{ borderRight: "1px solid var(--border)", padding: "12px 8px", display: "flex", flexDirection: "column", gap: 2 }}>
          {PLATFORM_RULE_KEYS.map(r => (
            <button key={r.key} onClick={() => setActiveRule(r.key)} style={{
              padding: "9px 12px", borderRadius: 6, fontSize: 13, textAlign: "left",
              background: activeRule === r.key ? "var(--surface-2)" : "transparent",
              color: activeRule === r.key ? "var(--ink)" : "var(--ink-2)",
              fontWeight: activeRule === r.key ? 500 : 400,
              display: "flex", alignItems: "center", justifyContent: "space-between",
            }}>
              {r.label}
              {vals[r.key] !== original[r.key] && <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--warn)", flexShrink: 0 }}/>}
            </button>
          ))}
        </div>

        {/* Right editor */}
        <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{current?.label}</div>
          <textarea
            value={vals[activeRule] ?? ""}
            onChange={e => setVals(prev => ({ ...prev, [activeRule]: e.target.value }))}
            placeholder={current?.placeholder}
            rows={14}
            style={{
              width: "100%", padding: "12px 14px", fontSize: 13, lineHeight: 1.65,
              border: "1px solid var(--border)", borderRadius: 8, resize: "vertical",
              outline: "none", background: "var(--bg)", color: "var(--ink)",
              fontFamily: "var(--font-mono)", transition: "border-color .15s",
            }}
            onFocus={e => e.target.style.borderColor = "var(--ink-3)"}
            onBlur={e => e.target.style.borderColor = "var(--border)"}
          />
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
            <Button variant="secondary" disabled={!changed} onClick={() => setVals(original)}>取消</Button>
            <Button variant="primary" disabled={!changed || saving} onClick={handleSave}>
              {saving ? "儲存中…" : "儲存"}
            </Button>
          </div>
        </div>
      </div>
    </Card>
  );
};

const PlaceholderPanel = ({ title, desc }) => (
  <Card padding={40} style={{ textAlign: "center" }}>
    <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--surface-2)", color: "var(--ink-3)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
      <Icon name="settings" size={22}/>
    </div>
    <div style={{ fontSize: 15, fontWeight: 600 }}>{title}</div>
    <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6, maxWidth: 380, marginLeft: "auto", marginRight: "auto", lineHeight: 1.6 }}>{desc}</div>
    <div style={{ marginTop: 16 }}><Button variant="secondary" icon="edit">編輯此區塊</Button></div>
  </Card>
);

window.SettingsPage = SettingsPage;