import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { booksApi } from "../api/books";
import type { ReadingSettings } from "../types/book";
import type { SupportedLanguage } from "../locales";

const BG_COLORS = [
  { value: "#ffffff", labelKey: "settings.bgWhite" },
  { value: "#f4e4c1", labelKey: "settings.bgSepia" },
  { value: "#1a1a2e", labelKey: "settings.bgDark" },
  { value: "#c7edcc", labelKey: "settings.bgGreen" },
];

export function SettingsPage() {
  const { t, language, setLanguage } = useTranslation();
  const navigate = useNavigate();
  const [settings, setSettings] = useState<ReadingSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    const load = async () => {
      try { const data = await booksApi.getSettings(); setSettings(data); }
      catch (err) { setError(err instanceof Error ? err.message : t("settings.loadFailed")); }
      finally { setLoading(false); }
    };
    void load();
  }, [t]);

  const handleSave = async () => {
    if (!settings) return;
    setSaving(true); setError(null); setSuccess(false);
    try { await booksApi.updateSettings(settings); setSuccess(true); setTimeout(() => setSuccess(false), 2000); }
    catch (err) { setError(err instanceof Error ? err.message : t("settings.saveFailed")); }
    finally { setSaving(false); }
  };

  if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>{t("settings.loading")}</p></div>;

  return (
    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← {t("common.back")}</button>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("settings.title")}</h1>
      </header>
      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
        {success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>{t("settings.saved")}</div>}

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("settings.uiLanguage")}</label>
          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value as SupportedLanguage)}
            style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}
          >
            <option value="en-US">{t("settings.uiLanguageEn")}</option>
            <option value="es-ES">{t("settings.uiLanguageEs")}</option>
          </select>
        </div>

        {settings && <>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("settings.fontSize", { size: String(settings.font_size) })}</label>
            <input type="range" min={12} max={36} value={settings.font_size} onChange={(e) => setSettings({ ...settings, font_size: Number(e.target.value) })} style={{ width: "100%", cursor: "pointer" }} />
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#999" }}><span>12px</span><span>36px</span></div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("settings.fontStyle")}</label>
            <select value={settings.font_style} onChange={(e) => setSettings({ ...settings, font_style: e.target.value as ReadingSettings["font_style"] })} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}>
              <option value="sans-serif">{t("settings.fontSans")}</option><option value="serif">{t("settings.fontSerif")}</option><option value="monospace">{t("settings.fontMonospace")}</option>
            </select>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("settings.backgroundColor")}</label>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              {BG_COLORS.map((bg) => (
                <button key={bg.value} onClick={() => setSettings({ ...settings, background_color: bg.value })}
                  style={{ width: 48, height: 48, borderRadius: "50%", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: bg.value, border: settings.background_color === bg.value ? "3px solid #1a1a2e" : "3px solid #ddd" }}
                  title={t(bg.labelKey)}>
                  {settings.background_color === bg.value && <span style={{ fontSize: 20, fontWeight: 700, color: bg.value === "#ffffff" || bg.value === "#f4e4c1" ? "#1a1a2e" : "#fff" }}>✓</span>}
                </button>
              ))}
            </div>
          </div>
        </>}

        <button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? t("common.saving") : t("settings.saveSettings")}</button>
      </div>
    </div>
  );
}
