/* ===== screens.jsx — Login, ProjectList, BoreholeList ===== */

function StatusBar() {
  return (
    <div className="statusbar">
      <span>9:41</span>
      <span className="dots"><span /><span /><span style={{ background: "var(--green)" }} /></span>
    </div>
  );
}

function Fab({ onClick, label, raised }) {
  return (
    <button className={"fab" + (raised ? " raised" : "")} onClick={onClick} aria-label={label} title={label}>
      <Icon name="plus" size={26} stroke={2.4} />
    </button>
  );
}

/* ---------- LOGIN ---------- */
/* Demo login: pick a user. Real environment authenticates via Reaalprojekt
   SSO — roles & project assignments are managed in the admin console. */
const FIELD_ROLE_HEX = { admin: "#22285c", pm: "#15803d", field: "#b45309", viewer: "#64748b" };
function fInitials(name) {
  return (name || "?").split(/[\s.]+/).filter(Boolean).slice(0, 2).map((s) => s[0].toUpperCase()).join("");
}

function LoginScreen({ onLogin }) {
  const me = RPStore.getCurrentUser();
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  const inputStyle = {
    width: "100%", boxSizing: "border-box", padding: "12px 14px",
    borderRadius: 10, border: "1px solid var(--border, #d4d8e2)",
    background: "var(--surface, #fff)", color: "inherit",
    font: "500 15px/1.2 inherit", outline: "none",
  };

  const submit = (e) => {
    e.preventDefault();
    if (!email.trim() || !pw) return;
    setBusy(true); setErr("");
    RPStore.auth.signIn(email.trim(), pw)
      .then((u) => { setBusy(false); onLogin(u); })
      .catch((ex) => {
        setBusy(false);
        setErr(/invalid/i.test(ex.message || "") ? "Vale e-post või parool" : (ex.message || "Sisselogimine ebaõnnestus"));
      });
  };

  return (
    <div className="screen fade-in">
      <div className="login-wrap">
        <div className="brand">
          <RPLogo height={72} />
          <div style={{ textAlign: "center" }}>
            <h1><span className="rp">RP</span> Geolog</h1>
            <p>Field Logging System</p>
          </div>
        </div>

        <div className="login-card">
          {me ? (
            <div className="acct-list">
              <div className="acct-cap">Sisse logitud</div>
              <button type="button" className="acct" onClick={() => onLogin(me)}>
                <span className="acct-av" style={{ background: FIELD_ROLE_HEX[me.role] }}>{fInitials(me.name)}</span>
                <span className="acct-body">
                  <b>{me.name}</b>
                  <span>{(RPStore.ROLES[me.role] || {}).label}</span>
                </span>
                <Icon name="chevron" size={17} />
              </button>
              <button type="button" className="acct" onClick={() => { RPStore.auth.signOut(); }}>
                <span className="acct-av" style={{ background: "#64748b" }}><Icon name="logout" size={16} /></span>
                <span className="acct-body"><b>Logi välja</b><span>Vaheta kasutajat</span></span>
              </button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "grid", gap: 10, padding: "4px 2px" }}>
              <div className="acct-cap">Logi sisse</div>
              <input style={inputStyle} type="email" placeholder="E-post" autoComplete="username"
                value={email} onChange={(e) => setEmail(e.target.value)} />
              <input style={inputStyle} type="password" placeholder="Parool" autoComplete="current-password"
                value={pw} onChange={(e) => setPw(e.target.value)} />
              {err && <div style={{ color: "#dc2626", fontSize: 13, fontWeight: 600 }}>{err}</div>}
              <button className="btn btn-primary" type="submit" disabled={busy || !email.trim() || !pw}
                style={{ padding: "12px 14px", justifyContent: "center" }}>
                {busy ? "Login…" : "Logi sisse"}
              </button>
            </form>
          )}
        </div>

        <div className="foot">v5.0 · AGS4 compliant · Supabase pilv</div>
      </div>
    </div>
  );
}

/* ---------- PROJECT LIST ---------- */
function ProjectListScreen({ me, onOpen, onLogout }) {
  const allowed = RPStore.userProjects(me); /* null = all */
  const projs = allowed ? PROJECTS.filter((p) => allowed.includes(p.id)) : PROJECTS;
  return (
    <div className="screen fade-in">
      <div className="appbar">
        <RPLogo height={30} />
        <div className="grow">
          <h1>RP Geolog</h1>
          <div className="sub">PROJEKTID · {projs.filter((p) => p.status === "Active").length} AKTIIVSET</div>
        </div>
        <div className="userchip" title={me ? me.name + " · " + (RPStore.ROLES[me.role] || {}).label : ""}>
          <div className="avatar" style={me ? { background: FIELD_ROLE_HEX[me.role] } : undefined}>{me ? fInitials(me.name) : "?"}</div>
          <button className="iconbtn" onClick={onLogout} aria-label="Log out" title="Logi välja">
            <Icon name="logout" size={19} />
          </button>
        </div>
      </div>

      <div className="scroll pad" style={{ paddingBottom: 88 }}>
        <div className="section-label"><span>{allowed ? "Minu projektid" : "All projects"}</span><span>{projs.length}</span></div>
        <div className="list">
          {projs.map((p) => (
            <button key={p.id} className="card tap" onClick={() => onOpen(p)}>
              <div className="row-between">
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 15.5, letterSpacing: "-.01em" }}>{p.name}</div>
                  <div className="mono" style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{p.code}</div>
                </div>
                <StatusBadge status={p.status} />
              </div>
              <div className="metaline">
                <span className="meta"><Icon name="user" size={15} /> {p.client}</span>
                <span className="meta"><Icon name="drill" size={15} /> <b>{p.boreholes}</b> auku</span>
              </div>
            </button>
          ))}
          {projs.length === 0 && (
            <div className="empty" style={{ padding: 24 }}>
              <p>Sulle pole veel ühtegi projekti määratud.<br />Projektimäärangud teeb administraator admin-konsoolis.</p>
            </div>
          )}
        </div>
      </div>

      <Fab onClick={() => onOpen("new")} label="Uus projekt" raised />
    </div>
  );
}

/* ---------- BOREHOLE LIST ---------- */
function BoreholeListScreen({ project, onBack, onOpen, onAdd }) {
  const holes = BOREHOLES[project.id] || [];
  const [exp, setExp] = useState(false);
  return (
    <div className="screen fade-in">
      <div className="appbar">
        <button className="iconbtn" onClick={onBack} aria-label="Back" title="Back">
          <Icon name="back" size={22} />
        </button>
        <div className="grow">
          <h1 style={{ fontSize: 16 }}>{project.name}</h1>
          <div className="sub">{project.code}</div>
        </div>
        <div className="expwrap">
          <button className="iconbtn" onClick={() => setExp(!exp)} aria-label="Ekspordi" title="Ekspordi">
            <Icon name="download" size={20} />
          </button>
          {exp && (
            <div className="expmenu" onClick={() => setExp(false)}>
              <button className="expitem" onClick={() => RPStore.exportAGS4(project.id)}>
                <Icon name="cloud" size={16} /> Ekspordi AGS4
              </button>
              <button className="expitem" onClick={() => RPStore.exportJSON(project.id)}>
                <Icon name="table" size={16} /> Ekspordi JSON
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="scroll pad">
        <div className="section-label"><span>Boreholes &amp; pits</span><span>{holes.length}</span></div>

        {holes.length === 0 ? (
          <div className="empty">
            <div className="ico"><Icon name="drill" size={26} /></div>
            <h3>No boreholes yet</h3>
            <p>Add the first borehole or trial pit to begin logging field data for this project.</p>
            <button className="btn btn-primary btn-sm" onClick={onAdd} style={{ marginTop: 4 }}>
              <Icon name="plus" size={16} /> Add borehole
            </button>
          </div>
        ) : (
          <div className="list">
            {holes.map((h) => (
              <button key={h.id} className="card tap" onClick={() => onOpen(h)}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div className={"kindtag" + (h.type === "TP" ? " tp" : "")}>{h.type}</div>
                  <div className="grow" style={{ minWidth: 0 }}>
                    <div className="row-between">
                      <div className="mono" style={{ fontWeight: 600, fontSize: 15 }}>{h.id}</div>
                      <StatusBadge status={h.status} />
                    </div>
                    <div className="metaline" style={{ marginTop: 7 }}>
                      <span className="meta"><Icon name="ruler" size={14} /> <b>{(+h.depth || 0).toFixed(2)}</b> m</span>
                      <span className="meta"><Icon name="calendar" size={14} /> {h.date}</span>
                    </div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        )}
      </div>

      <Fab onClick={onAdd} label="New borehole" />
    </div>
  );
}

Object.assign(window, { StatusBar, Fab, LoginScreen, ProjectListScreen, BoreholeListScreen });