"use client"

import { useTransition } from "react"
import { Controller, useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { updateProfile } from "@/lib/actions/profile"
import { getPublicUrl } from "@/lib/utils/storage"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldGroup,
} from "@/components/ui/field"
import { AlertCircle, Loader2, Save, ShieldCheck, ShieldAlert } from "lucide-react"
import { UpdateProfileInput, updateProfileSchema } from "@/lib/schemas/auth"
import Uploader from "@/components/web/uploader/Uploader"

type ProfileUser = {
  id:            string
  name:          string | null
  email:         string
  studentId:     string | null
  role:          "STUDENT" | "ADMIN" | "STAFF"
  avatar:        string | null
  emailVerified: boolean
  _count: {
    loans:        number
    reservations: number
    reviews:      number
  }
}

const ROLE_STYLES: Record<ProfileUser["role"], string> = {
  ADMIN:   "bg-red-100 text-red-700 border-red-200 dark:bg-red-950/40 dark:text-red-400 dark:border-red-800",
  STAFF:   "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-400 dark:border-blue-800",
  STUDENT: "bg-stone-100 text-stone-700 border-stone-200 dark:bg-stone-800 dark:text-stone-300 dark:border-stone-700",
}

export function ProfileForm({ user }: { user: ProfileUser }) {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  const form = useForm<UpdateProfileInput>({
    resolver: zodResolver(updateProfileSchema),
    defaultValues: {
      name:      user.name      ?? "",
      studentId: user.studentId ?? "",
      avatar:    undefined,
    },
  })

  const { isDirty } = form.formState

  function onSubmit(values: UpdateProfileInput) {
    startTransition(async () => {
      const result = await updateProfile(values)
      if (result.status === "success") {
        toast.success(result.message)
        form.reset(values)
        router.refresh()
      } else {
        toast.error(result.message)
      }
    })
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-10">

      {/* ── Unsaved changes banner ── */}
      {isDirty && (
        <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-800 px-4 py-2.5 text-sm text-amber-700 dark:text-amber-400">
          <AlertCircle className="w-4 h-4 shrink-0" />
          You have unsaved changes.
        </div>
      )}

      {/* ══════════════════════════════════════
          SECTION 1 — Read-only account info
      ══════════════════════════════════════ */}
      <section className="space-y-4">
        <SectionHeader title="Account" />

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

          {/* Email */}
          <Field>
            <FieldLabel>Email address</FieldLabel>
            <div className="flex items-center gap-2">
              <Input value={user.email} disabled className="bg-muted/50 cursor-not-allowed" />
              {user.emailVerified
                ? <ShieldCheck className="w-4 h-4 text-green-500 shrink-0" />
                : <ShieldAlert className="w-4 h-4 text-amber-400 shrink-0" />
              }
            </div>
            <FieldDescription>
              {user.emailVerified ? "Verified" : "Not verified"} · Cannot be changed here.
            </FieldDescription>
          </Field>

          {/* Role */}
          <Field>
            <FieldLabel>Role</FieldLabel>
            <div className="flex h-9 items-center">
              <Badge variant="outline" className={ROLE_STYLES[user.role]}>
                {user.role}
              </Badge>
            </div>
            <FieldDescription>
              Assigned by an administrator. Contact support to request a change.
            </FieldDescription>
          </Field>

        </div>
      </section>

      {/* ══════════════════════════════════════
          SECTION 2 — Avatar
      ══════════════════════════════════════ */}
      <section className="space-y-4">
        <SectionHeader title="Profile Picture" />

        <Controller
          name="avatar"
          control={form.control}
          render={({ field }) => (
            <Field>
              <Uploader
                initialPreview={user.avatar ? getPublicUrl(user.avatar) : undefined}
                onUploadComplete={(key) => field.onChange(key)}
                onDelete={() => field.onChange(undefined)}
              />
              <FieldDescription>
                JPG or PNG · Max 5MB. Leave unchanged to keep your current picture.
              </FieldDescription>
            </Field>
          )}
        />
      </section>

      {/* ══════════════════════════════════════
          SECTION 3 — Editable details
      ══════════════════════════════════════ */}
      <section className="space-y-6">
        <SectionHeader title="Personal Info" />

        <FieldGroup className="grid grid-cols-1 sm:grid-cols-2 gap-6">

          <Controller
            name="name"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel htmlFor="name">Full name *</FieldLabel>
                <Input
                  {...field}
                  id="name"
                  placeholder="Your full name"
                  aria-invalid={fieldState.invalid}
                />
                {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
              </Field>
            )}
          />

          <Controller
            name="studentId"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel htmlFor="studentId">Student ID</FieldLabel>
                <Input
                  {...field}
                  id="studentId"
                  placeholder="e.g. STU-00123"
                  aria-invalid={fieldState.invalid}
                />
                <FieldDescription>
                  Must be unique across all accounts.
                </FieldDescription>
                {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
              </Field>
            )}
          />

        </FieldGroup>
      </section>

      {/* ══════════════════════════════════════
          SECTION 4 — Activity summary (read-only)
      ══════════════════════════════════════ */}
      <section className="space-y-4">
        <SectionHeader title="Activity" />
        <div className="grid grid-cols-3 gap-3">
          <StatCard label="Loans" value={user._count.loans} />
          <StatCard label="Reservations" value={user._count.reservations} />
          <StatCard label="Reviews" value={user._count.reviews} />
        </div>
      </section>

      {/* ── Actions ── */}
      <div className="flex items-center gap-3 pt-2 border-t">
        <Button type="submit" disabled={isPending || !isDirty} className="gap-2">
          {isPending
            ? <><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
            : <><Save className="w-4 h-4" /> Save changes</>
          }
        </Button>
        {isDirty && (
          <Button
            type="button"
            variant="ghost"
            disabled={isPending}
            onClick={() => form.reset()}
            className="text-muted-foreground"
          >
            Discard changes
          </Button>
        )}
      </div>
    </form>
  )
}

// ── Helpers ───────────────────────────────────────────────────────────────────

function SectionHeader({ title }: { title: string }) {
  return (
    <div className="space-y-2">
      <h2 className="text-base font-semibold text-stone-800 dark:text-stone-200">{title}</h2>
      <Separator />
    </div>
  )
}

function StatCard({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-lg border bg-muted/30 px-4 py-3 text-center">
      <p className="text-2xl font-bold text-stone-800 dark:text-stone-100">{value}</p>
      <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
    </div>
  )
}