import { useState } from "react";
import { post } from "../../api";
import { useT } from "../../i18n";
import { useStore } from "../../store";
import { GitAccount } from "./GitAccount";
import { ApiTokens } from "./ApiTokens";
import { CliInstall } from "./CliInstall";
import { Memory } from "./Memory";
import { Telegram } from "./Telegram";

export function Account() {
  const t = useT();
  const me = useStore((s) => s.me);
  const [form, setForm] = useState({ current: "", next: "", repeat: "" });
  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();

  const save = async () => {
    if (form.next !== form.repeat) return setNotice({ ok: false, text: t("login.mismatch") });
    try {
      await post("/auth/password", { current: form.current || undefined, new: form.next });
      setForm({ current: "", next: "", repeat: "" });
      setNotice({ ok: true, text: t("account.changed") });
    } catch (e: any) {
      setNotice({ ok: false, text: e.message });
    }
  };

  return (
    <>
    <div className="panel">
      <h3>
        {t("account.title")}: {me?.username}
      </h3>
      <div className="form">
        {me?.has_password && (
          <>
            <label>{t("account.current")}</label>
            <input type="password" value={form.current} onChange={(e) => setForm({ ...form, current: e.target.value })} autoComplete="current-password" />
          </>
        )}
        <label>{t("account.new")}</label>
        <input type="password" value={form.next} onChange={(e) => setForm({ ...form, next: e.target.value })} autoComplete="new-password" />
        <label>{t("login.passwordRepeat")}</label>
        <input type="password" value={form.repeat} onChange={(e) => setForm({ ...form, repeat: e.target.value })} autoComplete="new-password" />
      </div>
      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`} style={{ marginTop: 10 }}>{notice.text}</div>}
      <button className="primary" style={{ marginTop: 12 }} disabled={!form.next} onClick={save}>
        {t("account.change")}
      </button>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>{t("account.hint")}</div>
    </div>
    <Memory />
    <GitAccount />
    <CliInstall />
    <Telegram />
    <ApiTokens />
    </>
  );
}