"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { ShieldHalf } from "lucide-react";
import { api, clearToken } from "@/lib/api";

export default function Onboarding() {
  const r = useRouter();
  const [form, setForm] = useState({ name: "", gstin: "", phone: "",address: "" });
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [ready, setReady] = useState(false);

  // If the user already has an org (or is a product admin), don't show onboarding.
  useEffect(() => {
    api("/me")
      .then((me) => {
        if (me.is_product_admin) r.replace("/admin");
        else if (me.has_org) r.replace("/dashboard");
        else setReady(true);
      })
      .catch(() => { clearToken(); r.replace("/login"); });
  }, [r]);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.name.trim()) { setErr("Organization name is required."); return; }
    setErr(""); setBusy(true);
    try {
      await api("/organization", { method: "POST", body: JSON.stringify(form) });
      r.push("/dashboard");
    } catch (e: any) {
      // Already has an org → just go to the dashboard.
      if (e.status === 409) { r.replace("/dashboard"); return; }
      setErr(typeof e.detail === "string" ? e.detail : "Failed to create organization");
    } finally { setBusy(false); }
  }
  const set = (k: string) => (e: any) => setForm({ ...form, [k]: e.target.value });

  if (!ready)
    return <div className="min-h-screen grid place-items-center text-slate-400">Loading…</div>;

  return (
    <div className="min-h-screen grid place-items-center bg-slate-50 px-4">
      <div className="w-full max-w-md">
        <div className="flex items-center justify-center gap-2 font-extrabold text-xl mb-2">
          <span className="h-9 w-9 rounded-lg bg-brand-600 text-white grid place-items-center">
            <ShieldHalf className="h-5 w-5" />
          </span>
          VerifyPack
        </div>
        <div className="card p-8">
          <h1 className="text-2xl font-extrabold text-center">Create your organization</h1>
          <p className="text-slate-500 text-sm text-center mt-1">
            Set up your brand workspace to get started.
          </p>
          <form onSubmit={submit} className="mt-6 space-y-4">
  <Field
    label="Organization name"
    value={form.name}
    onChange={set("name")}
    required
    placeholder="e.g. ABC Pharma Pvt Ltd"
  />

  <Field
    label="GSTIN (optional)"
    value={form.gstin}
    onChange={set("gstin")}
    placeholder="29ABCDE1234F1Z5"
  />

  <Field
    label="Phone (optional)"
    value={form.phone}
    onChange={set("phone")}
  />

  <Field
    label="Address (optional)"
    value={form.address}
    onChange={set("address")}
    placeholder="Enter organization address"
  />

  {err && <p className="text-sm text-rose-600">{err}</p>}

  <button
    disabled={busy}
    className="w-full bg-brand-600 text-white py-3 rounded-full font-semibold disabled:opacity-60"
  >
    {busy ? "Creating…" : "Create & continue"}
  </button>
</form>
        </div>
      </div>
    </div>
  );
}

function Field({ label, ...props }: any) {
  return (
    <label className="block">
      <span className="text-sm font-medium text-slate-700">{label}</span>
      <input {...props}
        className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/30" />
    </label>
  );
}