import { applyVerificationAction, applyWholesaleAction, saveProfile } from "@/app/actions/auth";
import { PageShell } from "@/components/page";
import { PROFILE_TYPES, roleLabel } from "@/lib/roles";
import { prisma } from "@/lib/prisma";
import { readSession } from "@/lib/session";
import { redirect } from "next/navigation";

export default async function SettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ applied?: string }>;
}) {
  const session = await readSession();
  if (!session) redirect("/login?next=/settings");
  const { applied } = await searchParams;
  const user = await prisma.user.findUnique({
    where: { id: session.id },
    include: { profile: true },
  });
  if (!user) redirect("/login");

  return (
    <PageShell
      eyebrow="Membership"
      title="Your profile"
      lede={`${roleLabel(user.role)} · verification ${user.verificationStatus} · wholesale ${user.wholesaleStatus}`}
    >
      {applied === "verify" ? (
        <p className="mb-4 text-sm text-primary">Verification request sent to ElbeeGems Trust.</p>
      ) : null}
      {applied === "wholesale" ? (
        <p className="mb-4 text-sm text-primary">Wholesale access is pending approval. It is never automatic.</p>
      ) : null}

      <form action={saveProfile} className="eg-card grid gap-4">
        <div>
          <label className="eg-label" htmlFor="name">Name</label>
          <input id="name" name="name" defaultValue={user.name} required />
        </div>
        <div>
          <label className="eg-label" htmlFor="type">Profile type</label>
          <select id="type" name="type" defaultValue={user.profile?.type || "collector"}>
            {PROFILE_TYPES.map((type) => (
              <option key={type.value} value={type.value}>
                {type.label}
              </option>
            ))}
          </select>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          <div>
            <label className="eg-label" htmlFor="company">Company</label>
            <input id="company" name="company" defaultValue={user.profile?.company} />
          </div>
          <div>
            <label className="eg-label" htmlFor="country">Country</label>
            <input id="country" name="country" defaultValue={user.profile?.country} />
          </div>
        </div>
        <div>
          <label className="eg-label" htmlFor="location">City / region</label>
          <input id="location" name="location" defaultValue={user.profile?.location} />
        </div>
        <div>
          <label className="eg-label" htmlFor="specialties">Specialties</label>
          <input id="specialties" name="specialties" defaultValue={user.profile?.specialties} />
        </div>
        <div>
          <label className="eg-label" htmlFor="originFocus">Origin focus</label>
          <input id="originFocus" name="originFocus" defaultValue={user.profile?.originFocus} />
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          <div>
            <label className="eg-label" htmlFor="yearsInTrade">Years in trade</label>
            <input id="yearsInTrade" name="yearsInTrade" defaultValue={user.profile?.yearsInTrade} />
          </div>
          <div>
            <label className="eg-label" htmlFor="labs">Labs / affiliations</label>
            <input id="labs" name="labs" defaultValue={user.profile?.labs} />
          </div>
        </div>
        <div>
          <label className="eg-label" htmlFor="bio">Bio</label>
          <textarea id="bio" name="bio" rows={5} defaultValue={user.profile?.bio} />
        </div>
        <button className="eg-btn eg-btn-solid w-fit" type="submit">
          Save profile
        </button>
      </form>

      <div className="mt-8 grid gap-3 md:grid-cols-2">
        <form action={applyVerificationAction} className="eg-card">
          <h2 className="text-xl">Verified professional</h2>
          <p className="mt-2 text-sm text-muted">
            Extra directory ranking after ElbeeGems reviews your trade.
          </p>
          <button className="eg-btn eg-btn-outline mt-4" type="submit">
            Request verification
          </button>
        </form>
        <form action={applyWholesaleAction} className="eg-card">
          <h2 className="text-xl">Wholesale desk</h2>
          <p className="mt-2 text-sm text-muted">
            The trade door stays hidden. Approval is manual.
          </p>
          <button className="eg-btn eg-btn-outline mt-4" type="submit">
            Request wholesale
          </button>
        </form>
      </div>
    </PageShell>
  );
}