/** 설정 — API base URL·guard 키(localStorage). prod 에서 X-API-Key 헤더로 자동 첨부. */

import { useState } from "react";
import { settings } from "../api/client";
import { Button, Card, PageHeader } from "../components/ui";

export default function Settings() {
  const [baseUrl, setBaseUrl] = useState(settings.baseUrl());
  const [apiKey, setApiKey] = useState(settings.apiKey());
  const [saved, setSaved] = useState(false);

  return (
    <div className="max-w-xl space-y-4">
      <PageHeader title="설정" />
      <Card title="API 연결">
        <form
          className="space-y-4"
          onSubmit={(e) => {
            e.preventDefault();
            settings.save(baseUrl.trim(), apiKey.trim());
            setSaved(true);
            setTimeout(() => setSaved(false), 2000);
          }}
        >
          <div>
            <label htmlFor="base" className="mb-1 block text-[12px] font-semibold text-ink-700">API 주소</label>
            <input id="base" value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)}
              placeholder="비우면 현재 주소 기준 (개발: vite 프록시 → :9600)"
              className="w-full rounded-lg border border-line-200 bg-surface px-3 py-2 text-[13px] outline-none focus:border-primary-600" />
            <p className="mt-1 text-[11px] text-ink-400">예: https://lps.example.com — dev 서버를 직접 보려면 해당 주소 입력</p>
          </div>
          <div>
            <label htmlFor="key" className="mb-1 block text-[12px] font-semibold text-ink-700">API 키 (X-API-Key)</label>
            <input id="key" type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)}
              placeholder="개발(개방 모드)은 비워둠 — prod 만 필요"
              autoComplete="off"
              className="w-full rounded-lg border border-line-200 bg-surface px-3 py-2 text-[13px] outline-none focus:border-primary-600" />
            <p className="mt-1 text-[11px] text-ink-400">서버 toml 의 [WebServerConfig].api_keys 중 하나. 이 브라우저에만 저장됩니다.</p>
          </div>
          <Button type="submit" size="lg">저장</Button>
          {saved && <span className="ml-2 text-[12px] font-medium text-ok-600">저장했습니다</span>}
        </form>
      </Card>
      <p className="text-[11px] leading-relaxed text-ink-400">
        지표 임계·요청 예산 등 서버 동작 설정은 이 화면에서 바꾸지 않습니다 — 설정 소스는 서버의
        config.&lt;env&gt;.toml 하나이며(2026-07-13 협의), 변경은 toml 수정 + 재시작으로 합니다.
      </p>
    </div>
  );
}