"use client";

import { useState } from "react";
import { ROLES } from "@/lib/constants";
import { setLocalViewerAction } from "@/app/login/local-actions";
import { FormSubmitButton } from "@/components/ui/form-submit-button";
import { Select } from "@/components/ui/select";
import { Input } from "@/components/ui/input";

type LocalAccessFormProps = {
  scopes: string[];
  error: string | null;
};

export function LocalAccessForm({ scopes, error }: LocalAccessFormProps) {
  const [role, setRole] = useState<"admin" | "affiliate">(ROLES.affiliate);

  return (
    <form action={setLocalViewerAction} className="mt-7 space-y-5">
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-1.5">
          <label htmlFor="role" className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">
            Access Type
          </label>
          <Select
            id="role"
            name="role"
            value={role}
            onChange={(event) => setRole(event.target.value as "admin" | "affiliate")}
            className="h-12 rounded-2xl border-[#c9d9ee] bg-white/95 text-base focus:border-[#2663AC]"
          >
            <option value={ROLES.affiliate}>Marketing affiliates</option>
            <option value={ROLES.admin}>Top-level manager (admin)</option>
          </Select>
        </div>

        {role === ROLES.affiliate ? (
          <div className="space-y-1.5">
            <label htmlFor="scope" className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">
              Region
            </label>
            <Select
              id="scope"
              name="scope"
              defaultValue={scopes[0] ?? ""}
              className="h-12 rounded-2xl border-[#c9d9ee] bg-white/95 text-base focus:border-[#2663AC]"
            >
              {scopes.map((scope) => (
                <option key={scope} value={scope}>
                  {scope}
                </option>
              ))}
            </Select>
          </div>
        ) : (
          <div className="rounded-2xl border border-[#d6e4f3] bg-white/70 px-4 py-3">
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#2663AC]">Admin Access</p>
            <p className="mt-1 text-sm text-slate-600">
              Full view enabled. Region switching is available from the admin bar after login.
            </p>
          </div>
        )}
      </div>

      <div className="space-y-1.5">
        <label
          htmlFor="access-password"
          className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500"
        >
          Access Password
        </label>
        <Input
          id="access-password"
          name="access_password"
          type="password"
          autoComplete="current-password"
          placeholder="Enter access password"
          className="h-12 rounded-2xl border-[#c9d9ee] bg-white/95 text-base focus:border-[#2663AC]"
        />
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <FormSubmitButton
          idleLabel="Enter Dashboard"
          pendingLabel="Entering..."
          className="h-12 rounded-2xl px-6 text-base"
        />
        {error ? <p className="text-sm font-medium text-rose-600">{error}</p> : null}
      </div>
    </form>
  );
}
