"use client";

import { FormEvent, useEffect, useState } from "react";
import styles from "./SetupForm.module.css";

type SetupState = "checking" | "required" | "complete" | "unavailable";

type ApiError = {
  message?: string;
  fields?: Record<string, string>;
};

export default function SetupForm() {
  const [state, setState] = useState<SetupState>("checking");
  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [setupKey, setSetupKey] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useState("");
  const [fields, setFields] = useState<Record<string, string>>({});

  useEffect(() => {
    let active = true;
    fetch("/api/auth/setup", { cache: "no-store", credentials: "same-origin" })
      .then(async (response) => {
        if (!response.ok) throw new Error("setup unavailable");
        return response.json();
      })
      .then((payload) => {
        if (active) setState(payload.setupRequired ? "required" : "complete");
      })
      .catch(() => active && setState("unavailable"));
    return () => {
      active = false;
    };
  }, []);

  async function submit(event: FormEvent) {
    event.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setMessage("");
    setFields({});
    try {
      const response = await fetch("/api/auth/setup", {
        method: "POST",
        credentials: "same-origin",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ displayName, email, password, setupKey }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        const error = (payload.error ?? {}) as ApiError;
        setMessage(error.message ?? "Podešavanje nije uspelo. Proverite podatke i pokušajte ponovo.");
        setFields(error.fields ?? {});
        if (response.status === 404) setState("complete");
        return;
      }
      window.location.assign("/admin");
    } catch {
      setMessage("Server trenutno nije dostupan. Pokušajte ponovo za trenutak.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main className={styles.page}>
      <section className={styles.intro}>
        <div className={styles.mark}>M</div>
        <p className={styles.eyebrow}>MeniFlow · cPanel</p>
        <h1>Još jedan korak do digitalnog restorana.</h1>
        <p>
          Kreirajte prvi vlasnički nalog. Ovaj ekran se automatski zaključava
          čim podešavanje bude završeno.
        </p>
        <div className={styles.securityNote}>
          <span>✓</span>
          <div>
            <strong>Privatno i odvojeno</strong>
            <small>Svaki nalog vidi samo restorane kojima pripada.</small>
          </div>
        </div>
      </section>

      <section className={styles.formSide}>
        {state === "checking" && (
          <div className={styles.card} aria-live="polite">
            <div className={styles.loader} />
            <h2>Proveravamo instalaciju…</h2>
          </div>
        )}

        {state === "required" && (
          <form className={styles.card} onSubmit={submit}>
            <p className={styles.eyebrow}>Prvi vlasnik</p>
            <h2>Podesite administratorski nalog</h2>
            <p className={styles.lead}>Ovaj nalog dobija pristup početnim restoranima u sistemu.</p>

            <label>
              Ime i prezime
              <input
                autoComplete="name"
                value={displayName}
                onChange={(event) => setDisplayName(event.target.value)}
                maxLength={100}
                required
              />
              {fields.displayName && <small className={styles.error}>{fields.displayName}</small>}
            </label>
            <label>
              Email adresa
              <input
                type="email"
                autoComplete="email"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                maxLength={254}
                required
              />
              {fields.email && <small className={styles.error}>{fields.email}</small>}
            </label>
            <label>
              Nova lozinka
              <input
                type="password"
                autoComplete="new-password"
                value={password}
                onChange={(event) => setPassword(event.target.value)}
                minLength={12}
                maxLength={128}
                required
              />
              <small>Najmanje 12 znakova, jedno slovo i jedan broj.</small>
              {fields.password && <small className={styles.error}>{fields.password}</small>}
            </label>
            <label>
              Jednokratni instalacioni ključ
              <input
                type="password"
                autoComplete="off"
                value={setupKey}
                onChange={(event) => setSetupKey(event.target.value)}
                required
              />
              <small>Ključ se nalazi u fajlu meniflow.config.json iz ZIP paketa.</small>
            </label>

            {message && <div className={styles.alert} role="alert">{message}</div>}
            <button type="submit" disabled={submitting}>
              {submitting ? "Kreiranje naloga…" : "Završi podešavanje"}
            </button>
          </form>
        )}

        {state === "complete" && (
          <div className={styles.card}>
            <div className={styles.success}>✓</div>
            <p className={styles.eyebrow}>Podešavanje završeno</p>
            <h2>Instalacija je već zaštićena</h2>
            <p className={styles.lead}>Početni ekran više ne prima nove vlasničke naloge.</p>
            <a className={styles.buttonLink} href="/login">Idi na prijavu</a>
          </div>
        )}

        {state === "unavailable" && (
          <div className={styles.card}>
            <div className={styles.warning}>!</div>
            <h2>Podešavanje trenutno nije dostupno</h2>
            <p className={styles.lead}>
              Proverite podatke baze u cPanel Node.js aplikaciji, zatim restartujte aplikaciju.
            </p>
            <button type="button" onClick={() => window.location.reload()}>Pokušaj ponovo</button>
          </div>
        )}
      </section>
    </main>
  );
}