// --- Components ---
function Header() {
  return (
    <header className="flex items-center px-6 py-3 gap-6">
      <img width="120" src="/logo.png" />
      <a href="/dashboard" className="text-sm hover:underline">Dashboard</a>
      <a href="/admin" className="text-sm hover:underline">Admin</a>
      <form method="post" action="/logout" className="ml-auto">
        <button type="submit" className="text-sm hover:underline bg-transparent border-none cursor-pointer p-0">Logout</button>
      </form>
    </header>)
}

function ModelCard({ model, loading }) {
  if (loading) return <p className="text-sm text-gray-400">Henter model…</p>;
  if (!model) return <p className="text-sm text-gray-400">Ingen aktiv model</p>;

  const created = new Date(model.created_time_utc).toLocaleString(["da-DK"]);

  return (
    <div className="border rounded-lg p-4 mb-4 max-w-xl bg-white shadow-sm">
      <div className="flex items-center justify-between mb-1">
        <span className="font-semibold text-sm truncate" title={model.title}>{model.title}</span>
      </div>
      <p className="text-xs text-gray-500 mb-2">{model.description}</p>
      <dl className="text-xs text-gray-600 grid grid-cols-2 gap-x-4 gap-y-1">
        <dt className="font-medium">Dato for oprettelse</dt><dd>{created}</dd>
        <dt className="font-medium">Excelfil</dt><dd className="truncate">{model.data_filename}</dd>
      </dl>
    </div>
  );
}


function Layout({ children }) {
  return (
    <div>
      <Header />
      <main className="ml-10">{children}</main>
    </div>
  );
}

// --- Pages ---

function AdminModelCard({ model, isActive }) {
  if (!model) return null;
  const [error, setError] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const created = new Date(model.created_time_utc).toLocaleString(["da-DK"]);

  async function handleActivate() {
    setBusy(true);
    setError(null);
    try {
      await api.updateModel(model.model_id, true);
      location.reload();
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  async function handleDelete() {
    if (!confirm(`Slet "${model.title}"?`)) return;
    setBusy(true);
    setError(null);
    try {
      await api.deleteModel(model.model_id);
      location.reload();
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  return (
    <div className={`border rounded-lg p-4 mb-4 max-w-xl bg-white shadow-sm ${isActive ? "border-green-800" : ""}`}>
      <div className="flex items-center justify-between mb-1">
        <span className="font-semibold text-sm truncate" title={model.title}>{model.title}</span>
        {isActive && <span className="text-xs font-semibold bg-green-800 text-white px-2 py-0.5 rounded-full">AKTIV</span>}
      </div>
      <p className="text-xs text-gray-500 mb-2">{model.description}</p>
      <dl className="text-xs text-gray-600 flex flex-col gap-y-1">
        <div className="flex"><dt className="font-medium w-32 shrink-0">Dato for oprettelse</dt><dd className="flex-1">{created}</dd></div>
        <div className="flex"><dt className="font-medium w-32 shrink-0">Excelfil</dt><dd className="flex-1 truncate">{model.data_filename}</dd></div>
        <div className="flex"><dt className="font-medium w-32 shrink-0">Title</dt><dd className="flex-1">{model.title}</dd></div>
        <div className="flex"><dt className="font-medium w-32 shrink-0">Beskrivelse</dt><dd className="flex-1">{model.description}</dd></div>
        <div className="flex"><dt className="font-medium w-32 shrink-0">Modelinfo</dt><dd className="flex-1">{model.message}</dd></div>
        <div className="flex"><dt className="font-medium w-32 shrink-0">ID</dt><dd className="flex-1 font-mono truncate" title={model.model_id}>{model.model_id}</dd></div>
      </dl>
      <div className="flex gap-2 mt-3">
        {!isActive && (
          <>
          <button onClick={handleActivate} disabled={busy} className="text-xs border rounded px-3 py-1 bg-gray-800 text-white hover:bg-gray-700 disabled:opacity-50">
            Aktivér
          </button>
          <button onClick={handleDelete} disabled={busy} className="text-xs border rounded px-3 py-1 text-red-600 hover:bg-red-50 disabled:opacity-50">
            Slet
          </button>
          </>
        )
        }
      </div>
      {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
    </div>
  );
}

const OTHERS_PAGE_SIZE = 3;

function AdminPage() {
  const [models, setModels] = React.useState([]);
  const [activeId, setActiveId] = React.useState(null);
  const [uploadError, setUploadError] = React.useState(null);
  const [uploading, setUploading] = React.useState(false);
  const [othersPage, setOthersPage] = React.useState(0);

  function loadModels() {
    return api.listModels().then(setModels).catch(console.error);
  }

  React.useEffect(() => {
    loadModels();
    api.getActiveModel().then(m => m && setActiveId(m.model_id)).catch(() => {});
  }, []);

  async function handleUpload(e) {
    e.preventDefault();
    const form = new FormData(e.target);
    const file = form.get("file");
    const title = form.get("title");
    const description = form.get("description") || null;
    setUploading(true);
    setUploadError(null);
    try {
      await api.createModel(file, title, description);
      location.reload();
    } catch (err) {
      setUploadError(err.message);
      setUploading(false);
    }
  }

  return (
    <Layout>
      <h1 className="text-2xl font-bold py-6">Admin</h1>

      <h2 className="text-xl font-bold py-2">Modeller</h2>
      {models.length === 0
        ? <p className="text-sm text-gray-400">Ingen modeller fundet.</p>
        : (() => {
            const active = models.find(m => m.model_id === activeId);
            const others = models.filter(m => m.model_id !== activeId);
            return (
              <>
                {active
                  ? <AdminModelCard key={active.model_id} model={active} isActive={true} />
                  : <p className="text-sm text-gray-400 mb-4">Ingen aktiv model valgt.</p>
                }
                {others.length > 0 && (() => {
                  const pageCount = Math.ceil(others.length / OTHERS_PAGE_SIZE);
                  const page = Math.min(othersPage, pageCount - 1);
                  const pageItems = others.slice(page * OTHERS_PAGE_SIZE, (page + 1) * OTHERS_PAGE_SIZE);
                  return (
                    <details className="mb-4 max-w-xl">
                      <summary className="text-sm text-gray-600 cursor-pointer hover:underline py-2">Øvrige modeller ({others.length})</summary>
                      <div className="mt-3">
                        {pageItems.map(m => <AdminModelCard key={m.model_id} model={m} isActive={false} />)}
                        {pageCount > 1 && (
                          <div className="flex items-center gap-3 text-sm text-gray-600 mt-2">
                            <button type="button" onClick={() => setOthersPage(page - 1)} disabled={page === 0} className="border rounded px-2 py-1 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-gray-100">← Forrige</button>
                            <span>Side {page + 1} af {pageCount}</span>
                            <button type="button" onClick={() => setOthersPage(page + 1)} disabled={page >= pageCount - 1} className="border rounded px-2 py-1 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-gray-100">Næste →</button>
                          </div>
                        )}
                      </div>
                    </details>
                  );
                })()}
              </>
            );
          })()
      }

      <h2 className="text-xl font-bold pt-6 py-2">Upload ny model</h2>
      <form onSubmit={handleUpload} className="flex flex-col gap-3 max-w-sm">
        <label className="flex flex-col gap-1 text-sm">Titel
          <input name="title" required className="border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" required />
        </label>
        <label className="flex flex-col gap-1 text-sm">Beskrivelse
          <input name="description" className="border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" required />
        </label>
        <label className="flex flex-col gap-1 text-sm">Excelfil
          <input name="file" className="border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" type="file" accept=".xlsx" required />
        </label>
        <div>
          <button type="submit" disabled={uploading} className="bg-gray-800 text-white text-sm font-medium rounded px-4 py-2 hover:bg-gray-700 disabled:opacity-50">
            {uploading ? "Uploader…" : "Upload"}
          </button>
        </div>
        {uploadError && <p className="text-sm text-red-600">{uploadError}</p>}
      </form>
    </Layout>
  );
}

function DashboardPage() {
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [active, setActive] = React.useState(null);
  const [loadingActive, setLoadingActive] = React.useState(true);
  const [treatment1, setTreatment1] = React.useState("");
  const [treatment2, setTreatment2] = React.useState("null");

  async function fetchActive() {
    try {
      const response = await api.getActiveModel();
      setActive(response);
      const primCats = response?.primary_categories || [];
      const secCats = response?.secondary_categories || [];
      if (primCats.length > 0) {
        const pacli = primCats.find(c => c.code === "Paclitaxel");
        setTreatment1((pacli || primCats[0]).code);
      }
      if (secCats.length > 0) {
        const ec = secCats.find(c => c.code === "EC_Epirubicin_Cyclofosfamide");
        setTreatment2((ec || secCats[0]).code);
      }
    } catch (e) {
      setActive(null);
    } finally {
      setLoadingActive(false);
    }
  }

  React.useEffect(() => {
    fetchActive()
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    const form = new FormData(e.target);
    const body = {
      treatment1: form.get("treatment1"),
      treatment2: form.get("treatment2"),
      thick_hair: form.get("thick_hair")
    };

    try {
      const res = await api.predict(active.model_id, body);
      console.log(res)
      setResult(res);
      setError(null);
    } catch (err) {
      setError(err.message);
      setResult(null);
    }
  }

  const primaryCategories = active?.primary_categories || [];
  const secondaryCategories = active?.secondary_categories || [];

  return (
    <Layout>
      <h1 className="text-2xl font-bold py-6">Dashboard</h1>

      <h2 className="text-xl font-bold py-2">Aktive model</h2>

      <ModelCard model={active} loading={loadingActive} />

      <h2 className="text-xl font-bold py-2">Estimer succesrate</h2>

      <form onSubmit={handleSubmit} className="flex items-end gap-4">
        <label className="flex flex-col gap-1 text-sm">Primær kemo
          <select name="treatment1" className="border rounded px-2 py-1" value={treatment1} onChange={e => setTreatment1(e.target.value)} disabled={primaryCategories.length === 0}>
            {primaryCategories.length === 0
              ? <option value="">Ingen aktiv model tilgængelig</option>
              : primaryCategories.map(c => <option key={c.code} value={c.code}>{c.display}</option>)}
          </select>
        </label>

        <label className="flex flex-col gap-1 text-sm">Sekundær kemo
          <select name="treatment2" className="border rounded px-2 py-1" value={treatment2} onChange={e => setTreatment2(e.target.value)} disabled={secondaryCategories.length === 0}>
            {secondaryCategories.length === 0
              ? <option value="">Ingen aktiv model tilgængelig</option>
              : <>
                  {secondaryCategories.map(c => <option key={c.code} value={c.code}>{c.display}</option>)}
                  <option value="null">Ingen sekundær</option>
                </>}
          </select>
        </label>

        <label className="flex flex-col gap-1 text-sm">Hårtykkelse
          <select name="thick_hair" className="border rounded px-2 py-1">
            <option value="null">Ikke angivet</option>
            <option value="0">Ikke kraftigt</option>
            <option value="1">Kraftigt, afro eller asiatisk</option>
          </select>
        </label>
        <button type="submit" disabled={treatment1 === treatment2 || !treatment1} className="border rounded px-4 py-1 text-sm bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed">Beregn</button>
      </form>
      {result && <p className="pt-4">Sandsynlighed for at beholde mere end 50% af håret: <strong>{100 * result.p.toFixed(2)}%</strong></p>}
      {result && <p className="pt-4">For denne kombination af behandlinger er {result.n_obs} observationer i data, hvor af {result.n_success} er en succes.</p>}
      {result && <p className="pt-4 text-sm">Bemærk: Resultatet er et estimat og behæftet med usikkerheder.</p>}
      {error && <p className="text-red-600">{error}</p>}
    </Layout>
  );
}


function ModelPage() {
  return <p>
    Model
  </p>
}

function LoginPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="w-full max-w-sm">
        <div className="mb-8 text-center">
          <img src="/logo.png" alt="Rapunzel" className="mx-auto" width="140" />
        </div>
        <div className="bg-white border rounded-lg shadow-sm p-8">
          <form method="post" action="/login" className="flex flex-col gap-4">
            <input name="username" placeholder="Brugernavn" required className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
            <input name="password" type="password" placeholder="Adgangskode" required className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
            <button type="submit" className="bg-gray-800 text-white text-sm font-medium rounded px-4 py-2 hover:bg-gray-700">Log ind</button>
          </form>
        </div>
      </div>
    </div>
  )
}

// --- Mount ---

const PAGES = {
  "Dashboard": DashboardPage,
  "Admin": AdminPage,
  "Model": ModelPage,
  "Login": LoginPage
};

const root = document.getElementById('root');
const Page = PAGES[root.dataset.page];
ReactDOM.createRoot(root).render(<Page />);