// Settings.jsx — 12 설정: 기본 정보 · 예산 상한 · 데이터 관리 (인터랙티브)
const { Card, Button, StatusBadge } = window.DesignSystem_7d5e72;

function Field({ label, hint, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", fontSize: "13px", fontWeight: 600, color: "var(--ink-1)", marginBottom: "7px" }}>{label}</span>
      {children}
      {hint && <span style={{ display: "block", fontSize: "12px", color: "var(--ink-4)", marginTop: "6px" }}>{hint}</span>}
    </label>
  );
}

const inputStyle = {
  width: "100%", height: "48px", borderRadius: "12px", border: "1px solid var(--line-strong)",
  background: "var(--paper-0)", padding: "0 14px", fontFamily: "var(--font-sans)", fontSize: "15px",
  color: "var(--ink-1)", outline: "none", boxSizing: "border-box",
};

function SettingsScreen({ data, patch }) {
  const [saved, setSaved] = React.useState(false);
  const [draft, setDraft] = React.useState({
    couple: data.couple, weddingDate: data.weddingDate, budgetCap: data.budgetCap,
  });

  const onFocus = (e) => { e.target.style.borderColor = "var(--primary)"; e.target.style.boxShadow = "var(--shadow-focus)"; };
  const onBlur = (e) => { e.target.style.borderColor = "var(--line-strong)"; e.target.style.boxShadow = "none"; };

  const save = () => {
    patch({ couple: draft.couple, weddingDate: draft.weddingDate, budgetCap: Number(draft.budgetCap) || 0 });
    setSaved(true); setTimeout(() => setSaved(false), 1800);
  };
  const resetAll = () => {
    if (window.confirm("모든 진행 상태(체크리스트·고정 후보·설정)를 초기화할까요?")) {
      window.WedStore.reset();
      patch(() => ({ ...window.WED_DEFAULTS }));
      setDraft({ couple: window.WED_DEFAULTS.couple, weddingDate: window.WED_DEFAULTS.weddingDate, budgetCap: window.WED_DEFAULTS.budgetCap });
    }
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "16px", alignItems: "start" }}>
      <Card eyebrow="기본 정보" title="예식 정보 · 예산"
            action={saved ? <StatusBadge status="done" size="sm">저장됨</StatusBadge> : null}>
        <div style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
          <Field label="부부 표기" hint="사이드바 · 상단에 표시됩니다.">
            <input style={inputStyle} value={draft.couple} onFocus={onFocus} onBlur={onBlur}
                   onChange={(e) => setDraft({ ...draft, couple: e.target.value })} />
          </Field>
          <Field label="예식 예정일" hint="D-day가 전체 화면에 실시간 반영됩니다.">
            <input type="date" style={inputStyle} value={draft.weddingDate} onFocus={onFocus} onBlur={onBlur}
                   onChange={(e) => setDraft({ ...draft, weddingDate: e.target.value })} />
          </Field>
          <Field label="총예산 상한 (만원)" hint="대시보드 · 예산결제 화면에 반영됩니다.">
            <input type="number" inputMode="numeric" style={{ ...inputStyle, fontVariantNumeric: "tabular-nums" }}
                   value={draft.budgetCap} onFocus={onFocus} onBlur={onBlur}
                   onChange={(e) => setDraft({ ...draft, budgetCap: e.target.value })} />
          </Field>
          <div style={{ display: "flex", gap: "10px", marginTop: "4px" }}>
            <Button variant="primary" size="md" onClick={save}>저장</Button>
            <Button variant="ghost" size="md" onClick={() => setDraft({ couple: data.couple, weddingDate: data.weddingDate, budgetCap: data.budgetCap })}>되돌리기</Button>
          </div>
        </div>
      </Card>

      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
        <Card eyebrow="현재 값" title="실시간 미리보기">
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "12px" }}>
            {[["부부", data.couple], ["예식일", window.fmtDate(data.weddingDate)], ["남은 날", window.computeDday(data.weddingDate)], ["예산 상한", (data.budgetCap || 0).toLocaleString("ko-KR") + " 만원"]].map(([k, v], i) => (
              <li key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: "14px" }}>
                <span style={{ color: "var(--ink-3)" }}>{k}</span>
                <span style={{ color: "var(--ink-1)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{v}</span>
              </li>
            ))}
          </ul>
        </Card>

        <Card eyebrow="데이터 관리" title="저장 · 초기화" accent="risk">
          <p style={{ margin: "0 0 14px", fontSize: "13.5px", color: "var(--ink-2)", lineHeight: 1.6 }}>
            모든 진행 상태는 이 브라우저에 자동 저장됩니다. 새로고침해도 유지되며, 아래에서 초기화할 수 있습니다.
          </p>
          <Button variant="danger" size="md" onClick={resetAll}>전체 초기화</Button>
        </Card>
      </div>
    </div>
  );
}

window.SettingsScreen = SettingsScreen;