"use client"

import * as React from "react"
import Image from "next/image"
import Select from "react-select"
import { Download, Eye, Loader2, Pencil, Trash2 } from "lucide-react"
import { toast } from "sonner"
import { getCurrentUser } from "@/lib/auth"
import { hasSuperAdminAccess, isAccountAdmin } from "@/lib/role-access"
import type { AdminNimitSevakRow, ApiErrorResponse } from "@/types/api"
import {
  useDeleteAdminNimitSevakMutation,
  useGetAdminNimitSevaksQuery,
  useGetHierarchyTreeQuery,
  useLazyGetAdminNimitSevaksQuery,
  useUpdateAdminNimitSevakMutation,
} from "@/services/api/adminApi"
import {
  createEmptyNimitSevakSevaSelection,
  formatNimitSevakSevaSelections,
  NIMIT_SEVAK_SEVA_OPTIONS,
  normalizeNimitSevakSevaSelections,
  type NimitSevakSevaSelection,
  NIMIT_SEVAK_VEHICLE_VALUES,
} from "@/constants/nimit-sevak"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"

type Option = {
  value: string
  label: string
}

type EditableFormState = {
  firstName: string
  middleName: string
  lastName: string
  houseNo: string
  societyName: string
  locality: string
  landmark: string
  city: string
  state: string
  pincode: string
  country: string
  aadharCardNo: string
  mobileNo: string
  occupation: string
  age: string
  gender: "MALE" | "FEMALE" | "OTHER"
  preferredLanguage: "ENGLISH" | "GUJARATI" | "HINDI"
  pradeshId: string
  mandalName: string
  mandalPramukhName: string
  sevaAvailableFrom: string
  sevaAvailableTo: string
  vehicleAvailableFrom: string
  vehicleAvailableTo: string
}

const getErrorMessage = (error: unknown, fallback: string) => {
  const parsed = error as ApiErrorResponse
  return parsed?.data?.message || parsed?.data?.error || parsed?.message || fallback
}

const toDateInput = (value?: string | null) => (value ? String(value).slice(0, 10) : "")

const formatDate = (value?: string | null) => {
  if (!value) return "-"
  const parsed = new Date(value)
  if (Number.isNaN(parsed.getTime())) return "-"
  return parsed.toLocaleDateString("en-IN")
}

const formatLanguage = (value: string) => {
  if (value === "GUJARATI") return "Gujarati"
  if (value === "HINDI") return "Hindi"
  return "English"
}

const formatLabel = (value: string) =>
  value
    .split("_")
    .map((part) => part.charAt(0) + part.slice(1).toLowerCase())
    .join(" ")

const getSevaDetailLines = (row: Pick<AdminNimitSevakRow, "sevaSelections">) => {
  return formatNimitSevakSevaSelections(row.sevaSelections).filter(Boolean)
}

const selectClassNames = {
  control: (state: { isFocused: boolean }) =>
    cn(
      "min-h-10 rounded-md border border-input bg-background px-1 text-sm shadow-xs transition",
      state.isFocused ? "border-ring ring-3 ring-ring/20" : "",
    ),
  valueContainer: () => "gap-1 py-0.5",
  placeholder: () => "text-muted-foreground",
  menu: () => "overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg",
  option: (state: { isFocused: boolean; isSelected: boolean }) =>
    cn(
      "cursor-pointer px-3 py-2 text-sm",
      state.isSelected && "bg-primary text-primary-foreground",
      !state.isSelected && state.isFocused && "bg-accent text-accent-foreground",
    ),
  multiValue: () => "m-1 inline-flex items-center rounded bg-accent",
  multiValueLabel: () => "px-2 py-1 text-accent-foreground",
  multiValueRemove: () => "rounded-r px-1.5 text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
}

const createFormState = (row: AdminNimitSevakRow): EditableFormState => ({
  firstName: row.firstName || "",
  middleName: row.middleName || "",
  lastName: row.lastName || "",
  houseNo: row.houseNo || "",
  societyName: row.societyName || "",
  locality: row.locality || "",
  landmark: row.landmark || "",
  city: row.city || "",
  state: row.state || "",
  pincode: row.pincode || "",
  country: row.country || "India",
  aadharCardNo: row.aadharCardNo,
  mobileNo: row.mobileNo,
  occupation: row.occupation,
  age: String(row.age),
  gender: row.gender,
  preferredLanguage: row.preferredLanguage,
  pradeshId: String(row.pradeshId),
  mandalName: row.mandalName,
  mandalPramukhName: row.mandalPramukhName,
  sevaAvailableFrom: toDateInput(row.sevaAvailableFrom),
  sevaAvailableTo: toDateInput(row.sevaAvailableTo),
  vehicleAvailableFrom: toDateInput(row.vehicleAvailableFrom),
  vehicleAvailableTo: toDateInput(row.vehicleAvailableTo),
})

export function SvayamSevaDashboard() {
  const [user, setUser] = React.useState<ReturnType<typeof getCurrentUser>>(null)
  const [page, setPage] = React.useState(1)
  const [limit, setLimit] = React.useState(10)
  const [searchInput, setSearchInput] = React.useState("")
  const [searchFilter, setSearchFilter] = React.useState("")
  const [pradeshInput, setPradeshInput] = React.useState("")
  const [mandalInput, setMandalInput] = React.useState("")
  const [sevaInput, setSevaInput] = React.useState<string[]>([])
  const [vehicleInput, setVehicleInput] = React.useState<string[]>([])
  const [languageInput, setLanguageInput] = React.useState("")
  const [genderInput, setGenderInput] = React.useState("")
  const [pradeshFilter, setPradeshFilter] = React.useState("")
  const [sevaFilter, setSevaFilter] = React.useState<string[]>([])
  const [vehicleFilter, setVehicleFilter] = React.useState<string[]>([])
  const [languageFilter, setLanguageFilter] = React.useState("")
  const [genderFilter, setGenderFilter] = React.useState("")
  const [photoRow, setPhotoRow] = React.useState<AdminNimitSevakRow | null>(null)
  const [editingRow, setEditingRow] = React.useState<AdminNimitSevakRow | null>(null)
  const [form, setForm] = React.useState<EditableFormState | null>(null)
  const [sevaSelections, setSevaSelections] = React.useState<NimitSevakSevaSelection[]>([])
  const [selectedDrivableVehicles, setSelectedDrivableVehicles] = React.useState<string[]>([])
  const [selectedAvailableVehicles, setSelectedAvailableVehicles] = React.useState<string[]>([])

  React.useEffect(() => {
    setUser(getCurrentUser())
  }, [])

  const canAccess = hasSuperAdminAccess(user?.role) || isAccountAdmin(user?.role)

  const { data: hierarchyData } = useGetHierarchyTreeQuery({ activeAccountsOnly: true }, { skip: !canAccess })
  const { data, isLoading, isFetching } = useGetAdminNimitSevaksQuery(
    canAccess
      ? {
          page,
          limit,
          search: searchFilter || undefined,
          pradeshId: pradeshFilter ? Number(pradeshFilter) : undefined,
          seva: sevaFilter.length ? sevaFilter : undefined,
          vehicle: vehicleFilter.length ? vehicleFilter : undefined,
          language: (languageFilter || undefined) as "ENGLISH" | "GUJARATI" | "HINDI" | undefined,
          gender: (genderFilter || undefined) as "MALE" | "FEMALE" | "OTHER" | undefined,
        }
      : undefined,
    { skip: !canAccess },
  )
  const [getNimitSevaksForExport, { isFetching: isExporting }] = useLazyGetAdminNimitSevaksQuery()
  const [updateNimitSevak, { isLoading: isUpdating }] = useUpdateAdminNimitSevakMutation()
  const [deleteNimitSevak, { isLoading: isDeleting }] = useDeleteAdminNimitSevakMutation()

  const pradeshOptions = hierarchyData?.data || []
  const sevaOptions: Option[] = NIMIT_SEVAK_SEVA_OPTIONS.map((option) => ({ value: option.value, label: option.label }))
  const vehicleOptions: Option[] = NIMIT_SEVAK_VEHICLE_VALUES.map((value) => ({ value, label: formatLabel(value) }))

  const openDocument = (url: string | null | undefined, missingMessage: string) => {
    if (!url) {
      toast.error(missingMessage)
      return
    }

    window.open(url, "_blank", "noopener,noreferrer")
  }

  const renderSevaDetails = (row: Pick<AdminNimitSevakRow, "id" | "sevaSelections">) => {
    const sevaLines = getSevaDetailLines(row)
    if (!sevaLines.length) return <p className="font-medium">-</p>

    return (
      <div className="space-y-1">
        {sevaLines.map((line, index) => (
          <p key={`${row.id}-${index}`} className="font-medium leading-5 break-words">
            {line}
          </p>
        ))}
      </div>
    )
  }

  const handleApplyFilters = (event: React.FormEvent) => {
    event.preventDefault()
    setPage(1)
    setSearchFilter(searchInput.trim())
    setPradeshFilter(pradeshInput)
    setSevaFilter(sevaInput)
    setVehicleFilter(vehicleInput)
    setLanguageFilter(languageInput)
    setGenderFilter(genderInput)
  }

  const handleClearFilters = () => {
    setPage(1)
    setSearchInput("")
    setSearchFilter("")
    setPradeshInput("")
    setMandalInput("")
    setPradeshFilter("")
    setSevaInput([])
    setVehicleInput([])
    setLanguageInput("")
    setGenderInput("")
    setSevaFilter([])
    setVehicleFilter([])
    setLanguageFilter("")
    setGenderFilter("")
  }

  const handleExport = async () => {
    try {
      const response = await getNimitSevaksForExport({
        search: searchFilter || undefined,
        pradeshId: pradeshFilter ? Number(pradeshFilter) : undefined,
        seva: sevaFilter.length ? sevaFilter : undefined,
        vehicle: vehicleFilter.length ? vehicleFilter : undefined,
        language: (languageFilter || undefined) as "ENGLISH" | "GUJARATI" | "HINDI" | undefined,
        gender: (genderFilter || undefined) as "MALE" | "FEMALE" | "OTHER" | undefined,
        exportAll: true,
      }).unwrap()

      if (!response.data.length) {
        toast.error("No Svayam Sevak registrations found for export")
        return
      }

      const XLSX = await import("xlsx")
      const rows = response.data.map((row) => ({
        ID: row.id,
        "First Name": row.firstName || "",
        "Middle Name": row.middleName || "",
        "Last Name": row.lastName || "",
        Name: row.fullName,
        Phone: row.mobileNo,
        "House No": row.houseNo || "",
        "Society Name": row.societyName || "",
        Locality: row.locality || "",
        Landmark: row.landmark || "",
        City: row.city || "",
        State: row.state || "",
        "Pin Code": row.pincode || "",
        Country: row.country || "",
        Address: row.fullAddress,
        Occupation: row.occupation,
        Age: row.age,
        Gender: formatLabel(row.gender),
        Language: formatLanguage(row.preferredLanguage),
        Pradesh: row.pradeshName,
        Mandal: row.mandalName,
        "Mandal Pramukh Name": row.mandalPramukhName,
        Seva: formatNimitSevakSevaSelections(row.sevaSelections).join(", "),
        "Seva Available From": formatDate(row.sevaAvailableFrom),
        "Seva Available To": formatDate(row.sevaAvailableTo),
        "Drivable Vehicles": row.drivableVehicles.map(formatLabel).join(", "),
        "Available Vehicles": row.availableVehicles.map(formatLabel).join(", "),
        "Vehicle Available From": formatDate(row.vehicleAvailableFrom),
        "Vehicle Available To": formatDate(row.vehicleAvailableTo),
        "Created At": new Date(row.createdAt).toLocaleString("en-IN"),
      }))

      const worksheet = XLSX.utils.json_to_sheet(rows)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, "Svayam Sevak")
      XLSX.writeFile(workbook, `svayam-sevak-${new Date().toISOString().slice(0, 10)}.xlsx`)
      toast.success(`Exported ${response.data.length} Svayam Sevak registrations`)
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to export Svayam Sevak registrations"))
    }
  }

  const openEditSheet = (row: AdminNimitSevakRow) => {
    setEditingRow(row)
    setForm(createFormState(row))
    setSevaSelections(normalizeNimitSevakSevaSelections(row.sevaSelections))
    setSelectedDrivableVehicles(row.drivableVehicles)
    setSelectedAvailableVehicles(row.availableVehicles)
  }

  const closeEditSheet = () => {
    if (isUpdating) return
    setEditingRow(null)
    setForm(null)
    setSevaSelections([])
    setSelectedDrivableVehicles([])
    setSelectedAvailableVehicles([])
  }

  const toggleValue = (current: string[], value: string) => {
    if (current.includes(value)) return current.filter((entry) => entry !== value)
    return [...current, value]
  }

  const toggleSevaSelection = (sevaCode: string) => {
    setSevaSelections((current) => {
      const exists = current.some((selection) => selection.sevaCode === sevaCode)
      if (exists) return current.filter((selection) => selection.sevaCode !== sevaCode)
      return [...current, createEmptyNimitSevakSevaSelection(sevaCode)]
    })
  }

  const updateSevaSelection = (sevaCode: string, updater: (selection: NimitSevakSevaSelection) => NimitSevakSevaSelection) => {
    setSevaSelections((current) => current.map((selection) => (selection.sevaCode === sevaCode ? updater(selection) : selection)))
  }

  const toggleSubSeva = (sevaCode: string, subSevaCode: string) => {
    updateSevaSelection(sevaCode, (selection) => {
      const nextSubSevas = selection.subSevaCodes.includes(subSevaCode)
        ? selection.subSevaCodes.filter((value) => value !== subSevaCode)
        : [...selection.subSevaCodes, subSevaCode]
      const nextPageLinks = { ...selection.pageLinks }
      if (!nextSubSevas.includes(subSevaCode)) delete nextPageLinks[subSevaCode]
      return { ...selection, subSevaCodes: nextSubSevas, pageLinks: nextPageLinks }
    })
  }

  const handleSave = async () => {
    if (!editingRow || !form) return

    try {
      await updateNimitSevak({
        id: editingRow.id,
        firstName: form.firstName.trim(),
        middleName: form.middleName.trim(),
        lastName: form.lastName.trim(),
        houseNo: form.houseNo.trim(),
        societyName: form.societyName.trim(),
        locality: form.locality.trim(),
        landmark: form.landmark.trim(),
        city: form.city.trim(),
        state: form.state.trim(),
        pincode: form.pincode.replace(/\D/g, "").slice(0, 6),
        country: form.country.trim(),
        aadharCardNo: form.aadharCardNo.replace(/\D/g, ""),
        mobileNo: form.mobileNo.replace(/\D/g, ""),
        occupation: form.occupation.trim(),
        age: Number(form.age),
        gender: form.gender,
        preferredLanguage: form.preferredLanguage,
        pradeshId: Number(form.pradeshId),
        mandalName: form.mandalName.trim(),
        mandalPramukhName: form.mandalPramukhName.trim(),
        selectedSevas: sevaSelections.map((selection) => selection.sevaCode),
        sevaSelections,
        sevaAvailableFrom: form.sevaAvailableFrom,
        sevaAvailableTo: form.sevaAvailableTo,
        drivableVehicles: selectedDrivableVehicles,
        availableVehicles: selectedAvailableVehicles,
        vehicleAvailableFrom: selectedAvailableVehicles.length ? form.vehicleAvailableFrom || null : null,
        vehicleAvailableTo: selectedAvailableVehicles.length ? form.vehicleAvailableTo || null : null,
      }).unwrap()
      toast.success("Svayam Seva registration updated")
      closeEditSheet()
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to update Svayam Seva registration"))
    }
  }

  const handleDelete = async (row: AdminNimitSevakRow) => {
    const confirmed = window.confirm(`Delete Svayam Seva registration for ${row.fullName}?`)
    if (!confirmed) return

    try {
      await deleteNimitSevak({ id: row.id }).unwrap()
      toast.success("Svayam Seva registration deleted")
      if (photoRow?.id === row.id) setPhotoRow(null)
      if (editingRow?.id === row.id) closeEditSheet()
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to delete Svayam Seva registration"))
    }
  }

  if (!canAccess) {
    return (
      <Card className="border-destructive/20">
        <CardHeader>
          <CardTitle>Svayam Seva</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">Only Super Admin, DB Admin, and Account Admin can access this section.</p>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      <div className="space-y-1">
        <h2 className="text-2xl font-semibold tracking-tight text-foreground">Svayam Sevak</h2>
      </div>

      <Card className="border-primary/10">
        <CardContent className="pt-6">
          <form className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4" onSubmit={handleApplyFilters}>
            <Input placeholder="Search by name, phone, or seva" value={searchInput} onChange={(event) => setSearchInput(event.target.value)} />

            <select
              value={pradeshInput}
              onChange={(event) => {
                setPradeshInput(event.target.value)
                setMandalInput("")
              }}
              className="h-10 rounded-md border border-input bg-background px-3 text-sm"
            >
              <option value="">All Pradesh</option>
              {pradeshOptions.map((entry) => (
                <option key={entry.pradeshId} value={entry.pradeshId}>{entry.pradeshName}</option>
              ))}
            </select>

            <select value={mandalInput} onChange={(event) => setMandalInput(event.target.value)} className="h-10 rounded-md border border-input bg-background px-3 text-sm disabled:cursor-not-allowed disabled:opacity-60">
              <option value="">All Mandal</option>
            </select>

            <Select<Option, true>
              inputId="sevaFilter"
              unstyled
              isMulti
              closeMenuOnSelect={false}
              hideSelectedOptions={false}
              options={sevaOptions}
              value={sevaOptions.filter((option) => sevaInput.includes(option.value))}
              onChange={(options) => setSevaInput(options.map((option) => option.value))}
              placeholder="Filter Seva"
              noOptionsMessage={() => "No options found"}
              classNames={selectClassNames}
            />

            <Select<Option, true>
              inputId="vehicleFilter"
              unstyled
              isMulti
              closeMenuOnSelect={false}
              hideSelectedOptions={false}
              options={vehicleOptions}
              value={vehicleOptions.filter((option) => vehicleInput.includes(option.value))}
              onChange={(options) => setVehicleInput(options.map((option) => option.value))}
              placeholder="Filter Vehicles"
              noOptionsMessage={() => "No options found"}
              classNames={selectClassNames}
            />

            <select value={languageInput} onChange={(event) => setLanguageInput(event.target.value)} className="h-10 rounded-md border border-input bg-background px-3 text-sm">
              <option value="">All Languages</option>
              <option value="ENGLISH">English</option>
              <option value="GUJARATI">Gujarati</option>
              <option value="HINDI">Hindi</option>
            </select>

            <select value={genderInput} onChange={(event) => setGenderInput(event.target.value)} className="h-10 rounded-md border border-input bg-background px-3 text-sm">
              <option value="">All Genders</option>
              <option value="MALE">Male</option>
              <option value="FEMALE">Female</option>
              <option value="OTHER">Other</option>
            </select>

            <div className="flex flex-col gap-2 sm:flex-row xl:col-span-4 xl:justify-end">
              <Button type="button" size="icon" variant="outline" onClick={handleExport} disabled={isExporting} aria-label="Export Svayam Sevak as Excel" title="Export as Excel">
                {isExporting ? <Loader2 className="size-4 animate-spin" /> : <Download className="size-4" />}
              </Button>
              <Button type="button" variant="outline" onClick={handleClearFilters}>Clear</Button>
              <Button type="submit" disabled={isFetching}>Apply Filters</Button>
            </div>
          </form>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:hidden">
        {isLoading ? (
          <Card className="border-primary/10"><CardContent className="py-8 text-center text-sm text-muted-foreground">Loading Svayam Seva registrations...</CardContent></Card>
        ) : (data?.data || []).length === 0 ? (
          <Card className="border-primary/10"><CardContent className="py-8 text-center text-sm text-muted-foreground">No Svayam Seva registrations found.</CardContent></Card>
        ) : (
          (data?.data || []).map((row) => (
            <Card key={row.id} className="border-primary/10">
              <CardContent className="space-y-4 pt-6">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <h3 className="font-semibold text-foreground">{row.fullName}</h3>
                    <p className="text-sm text-muted-foreground">#{row.id} • {row.mobileNo}</p>
                    <p className="text-xs text-muted-foreground">{row.fullAddress || "-"}</p>
                  </div>
                  <div className="text-right text-xs text-muted-foreground">
                    <div>{row.pradeshName}</div>
                    <div>{row.mandalName}</div>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3 text-sm">
                  <div>
                    <p className="text-muted-foreground">Seva</p>
                    {renderSevaDetails(row)}
                  </div>
                  <div>
                    <p className="text-muted-foreground">Vehicles</p>
                    <p className="font-medium">{row.availableVehicles.map(formatLabel).join(", ") || "-"}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Language</p>
                    <p className="font-medium">{formatLanguage(row.preferredLanguage)}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Age / Gender</p>
                    <p className="font-medium">{row.age} / {formatLabel(row.gender)}</p>
                  </div>
                </div>

                <div className="flex flex-wrap gap-2">
                  <Button size="sm" variant="outline" onClick={() => setPhotoRow(row)}><Eye className="size-4" />View Photo</Button>
                  <Button size="sm" variant="outline" onClick={() => openDocument(row.aadharCardImageUrl, "Aadhaar card is not available for this registration") }><Eye className="size-4" />View Aadhaar</Button>
                  <Button size="sm" variant="outline" onClick={() => openDocument(row.receiptUrl, "Receipt PDF has not been generated for this registration") }><Eye className="size-4" />View Receipt</Button>
                  <Button size="sm" variant="outline" onClick={() => openEditSheet(row)}><Pencil className="size-4" />Edit</Button>
                  <Button size="sm" variant="destructive" onClick={() => handleDelete(row)} disabled={isDeleting}><Trash2 className="size-4" />Delete</Button>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

      <Card className="hidden overflow-hidden border-primary/10 md:block">
        <CardContent className="p-0">
          <div className="w-full overflow-x-auto">
            <Table className="min-w-[1250px]">
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Phone</TableHead>
                  <TableHead>Pradesh</TableHead>
                  <TableHead>Mandal</TableHead>
                  <TableHead>Seva</TableHead>
                  <TableHead>Vehicles</TableHead>
                  <TableHead>Language</TableHead>
                  <TableHead>Created</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  <TableRow><TableCell colSpan={10} className="py-8 text-center text-muted-foreground">Loading Svayam Seva registrations...</TableCell></TableRow>
                ) : (data?.data || []).length === 0 ? (
                  <TableRow><TableCell colSpan={10} className="py-8 text-center text-muted-foreground">No Svayam Seva registrations found.</TableCell></TableRow>
                ) : (
                  (data?.data || []).map((row) => (
                    <TableRow key={row.id}>
                      <TableCell>#{row.id}</TableCell>
                      <TableCell>
                        <div className="flex flex-col">
                          <span className="font-medium">{row.fullName}</span>
                          <span className="text-xs text-muted-foreground">{row.city || "-"}, {row.state || "-"}</span>
                          <span className="text-xs text-muted-foreground">{row.age} / {formatLabel(row.gender)}</span>
                        </div>
                      </TableCell>
                      <TableCell>{row.mobileNo}</TableCell>
                      <TableCell>{row.pradeshName}</TableCell>
                      <TableCell>{row.mandalName}</TableCell>
                      <TableCell className="max-w-[320px] whitespace-normal">{renderSevaDetails(row)}</TableCell>
                      <TableCell className="max-w-[220px] whitespace-normal">{row.availableVehicles.map(formatLabel).join(", ") || "-"}</TableCell>
                      <TableCell>{formatLanguage(row.preferredLanguage)}</TableCell>
                      <TableCell>{formatDate(row.createdAt)}</TableCell>
                      <TableCell>
                        <div className="flex flex-wrap items-center gap-2">
                          <Button size="sm" variant="outline" onClick={() => setPhotoRow(row)} aria-label={`View ${row.fullName} photo`}><Eye className="size-4" />Photo</Button>
                          <Button size="sm" variant="outline" onClick={() => openDocument(row.aadharCardImageUrl, "Aadhaar card is not available for this registration")} aria-label={`View ${row.fullName} Aadhaar`}><Eye className="size-4" />Aadhaar</Button>
                          <Button size="sm" variant="outline" onClick={() => openDocument(row.receiptUrl, "Receipt PDF has not been generated for this registration")} aria-label={`View ${row.fullName} receipt`}><Eye className="size-4" />Receipt</Button>
                          <Button size="sm" variant="outline" onClick={() => openEditSheet(row)} aria-label={`Edit ${row.fullName}`}><Pencil className="size-4" />Edit</Button>
                          <Button size="sm" variant="destructive" onClick={() => handleDelete(row)} disabled={isDeleting} aria-label={`Delete ${row.fullName}`}><Trash2 className="size-4" />Delete</Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {data?.pagination && (
        <Card className="border-primary/10">
          <CardContent className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="text-sm text-muted-foreground">Page {data.pagination.page} of {data.pagination.totalPages || 1}</div>
            <div className="flex items-center gap-2">
              <select value={limit} onChange={(event) => { setLimit(Number(event.target.value)); setPage(1) }} className="h-9 rounded-md border border-border bg-background px-2">
                <option value={10}>10</option>
                <option value={25}>25</option>
                <option value={50}>50</option>
              </select>
              <Button variant="outline" size="sm" onClick={() => setPage((current) => Math.max(1, current - 1))} disabled={(data.pagination.page || 1) <= 1 || isFetching}>Previous</Button>
              <Button variant="outline" size="sm" onClick={() => setPage((current) => current + 1)} disabled={(data.pagination.page || 1) >= (data.pagination.totalPages || 1) || isFetching}>Next</Button>
            </div>
          </CardContent>
        </Card>
      )}

      <Sheet open={Boolean(photoRow)} onOpenChange={(open) => !open && setPhotoRow(null)}>
        <SheetContent side="bottom" className="mx-auto h-auto max-h-[90vh] w-full max-w-3xl rounded-t-2xl border">
          <SheetHeader>
            <SheetTitle>{photoRow?.fullName || "Profile Photo"}</SheetTitle>
            <SheetDescription>Svayam Seva profile photo preview</SheetDescription>
          </SheetHeader>
          <div className="px-4 pb-6">
            {photoRow?.profilePhotoUrl ? (
              <Image src={photoRow.profilePhotoUrl} alt={`${photoRow.fullName} profile`} width={1200} height={1200} className="max-h-[70vh] w-full rounded-xl border border-border object-contain" unoptimized />
            ) : (
              <div className="rounded-xl border border-dashed border-border px-4 py-12 text-center text-sm text-muted-foreground">No profile photo available.</div>
            )}
          </div>
        </SheetContent>
      </Sheet>

      <Sheet open={Boolean(editingRow && form)} onOpenChange={(open) => !open && closeEditSheet()}>
        <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-2xl">
          <SheetHeader>
            <SheetTitle>Edit Svayam Seva</SheetTitle>
            <SheetDescription>Update registration details, seva, vehicles, and hierarchy mapping.</SheetDescription>
          </SheetHeader>

          {!form ? null : (
            <div className="space-y-6 px-4 pb-6">
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2"><Label>First Name</Label><Input value={form.firstName} onChange={(event) => setForm((current) => current ? { ...current, firstName: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Middle Name</Label><Input value={form.middleName} onChange={(event) => setForm((current) => current ? { ...current, middleName: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Last Name</Label><Input value={form.lastName} onChange={(event) => setForm((current) => current ? { ...current, lastName: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Mobile No</Label><Input value={form.mobileNo} onChange={(event) => setForm((current) => current ? { ...current, mobileNo: event.target.value.replace(/\D/g, "").slice(0, 10) } : current)} /></div>
                <div className="space-y-2"><Label>Aadhaar No</Label><Input value={form.aadharCardNo} onChange={(event) => setForm((current) => current ? { ...current, aadharCardNo: event.target.value.replace(/\D/g, "").slice(0, 12) } : current)} /></div>
                <div className="space-y-2"><Label>Occupation</Label><Input value={form.occupation} onChange={(event) => setForm((current) => current ? { ...current, occupation: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Age</Label><Input type="number" min={1} max={120} value={form.age} onChange={(event) => setForm((current) => current ? { ...current, age: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Gender</Label><select value={form.gender} onChange={(event) => setForm((current) => current ? { ...current, gender: event.target.value as EditableFormState["gender"] } : current)} className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"><option value="MALE">Male</option><option value="FEMALE">Female</option><option value="OTHER">Other</option></select></div>
                <div className="space-y-2"><Label>Preferred Language</Label><select value={form.preferredLanguage} onChange={(event) => setForm((current) => current ? { ...current, preferredLanguage: event.target.value as EditableFormState["preferredLanguage"] } : current)} className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"><option value="ENGLISH">English</option><option value="GUJARATI">Gujarati</option><option value="HINDI">Hindi</option></select></div>
                <div className="space-y-2"><Label>Mandal Pramukh Name</Label><Input value={form.mandalPramukhName} onChange={(event) => setForm((current) => current ? { ...current, mandalPramukhName: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>House No</Label><Input value={form.houseNo} onChange={(event) => setForm((current) => current ? { ...current, houseNo: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Society Name</Label><Input value={form.societyName} onChange={(event) => setForm((current) => current ? { ...current, societyName: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Locality</Label><Input value={form.locality} onChange={(event) => setForm((current) => current ? { ...current, locality: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Landmark</Label><Input value={form.landmark} onChange={(event) => setForm((current) => current ? { ...current, landmark: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>City</Label><Input value={form.city} onChange={(event) => setForm((current) => current ? { ...current, city: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>State</Label><Input value={form.state} onChange={(event) => setForm((current) => current ? { ...current, state: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Pin Code</Label><Input value={form.pincode} onChange={(event) => setForm((current) => current ? { ...current, pincode: event.target.value.replace(/\D/g, "").slice(0, 6) } : current)} /></div>
                <div className="space-y-2"><Label>Country</Label><Input value={form.country} onChange={(event) => setForm((current) => current ? { ...current, country: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Pradesh</Label><select value={form.pradeshId} onChange={(event) => setForm((current) => current ? { ...current, pradeshId: event.target.value } : current)} className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"><option value="">Select Pradesh</option>{pradeshOptions.map((entry) => (<option key={entry.pradeshId} value={entry.pradeshId}>{entry.pradeshName}</option>))}</select></div>
                <div className="space-y-2"><Label>Mandal</Label><Input value={form.mandalName} onChange={(event) => setForm((current) => current ? { ...current, mandalName: event.target.value } : current)} /></div>
              </div>

              <div className="space-y-3">
                <Label>Available Sevas</Label>
                <div className="grid grid-cols-1 gap-2">
                  {NIMIT_SEVAK_SEVA_OPTIONS.map((option) => {
                    const checked = sevaSelections.some((selection) => selection.sevaCode === option.value)
                    const selection = sevaSelections.find((entry) => entry.sevaCode === option.value)
                    return (
                      <div key={option.value} className="rounded-md border border-border px-3 py-3 text-sm">
                        <label className="flex items-center gap-2"><input type="checkbox" checked={checked} onChange={() => toggleSevaSelection(option.value)} /><span>{option.label}</span></label>
                        {checked && option.subSevas?.length ? (
                          <div className="mt-3 grid gap-2 sm:grid-cols-2">
                            {option.subSevas.map((subOption) => {
                              const subChecked = selection?.subSevaCodes.includes(subOption.value) || false
                              return (
                                <div key={subOption.value} className="rounded-md border border-border/60 px-3 py-2">
                                  <label className="flex items-center gap-2"><input type="checkbox" checked={subChecked} onChange={() => toggleSubSeva(option.value, subOption.value)} /><span>{subOption.label}</span></label>
                                  {subChecked && subOption.requiresPageLink ? (
                                    <Input className="mt-2" value={selection?.pageLinks[subOption.value] || ""} onChange={(event) => updateSevaSelection(option.value, (current) => ({ ...current, pageLinks: { ...current.pageLinks, [subOption.value]: event.target.value } }))} placeholder="https://..." />
                                  ) : null}
                                </div>
                              )
                            })}
                          </div>
                        ) : null}
                        {checked && option.requiresTextInput ? (
                          <Input className="mt-3" value={selection?.customValue || ""} onChange={(event) => updateSevaSelection(option.value, (current) => ({ ...current, customValue: event.target.value }))} placeholder={option.textInputPlaceholder || "Enter details"} />
                        ) : null}
                      </div>
                    )
                  })}
                </div>
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2"><Label>Seva Available From</Label><Input type="date" value={form.sevaAvailableFrom} onChange={(event) => setForm((current) => current ? { ...current, sevaAvailableFrom: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Seva Available To</Label><Input type="date" value={form.sevaAvailableTo} onChange={(event) => setForm((current) => current ? { ...current, sevaAvailableTo: event.target.value } : current)} /></div>
              </div>

              <div className="space-y-3">
                <Label>Drivable Vehicles</Label>
                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                  {NIMIT_SEVAK_VEHICLE_VALUES.map((value) => (
                    <label key={value} className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm"><input type="checkbox" checked={selectedDrivableVehicles.includes(value)} onChange={() => setSelectedDrivableVehicles((current) => toggleValue(current, value))} /><span>{formatLabel(value)}</span></label>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <Label>Available Vehicles</Label>
                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                  {NIMIT_SEVAK_VEHICLE_VALUES.map((value) => (
                    <label key={value} className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm"><input type="checkbox" checked={selectedAvailableVehicles.includes(value)} onChange={() => setSelectedAvailableVehicles((current) => toggleValue(current, value))} /><span>{formatLabel(value)}</span></label>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2"><Label>Vehicle Available From</Label><Input type="date" value={form.vehicleAvailableFrom} disabled={!selectedAvailableVehicles.length} onChange={(event) => setForm((current) => current ? { ...current, vehicleAvailableFrom: event.target.value } : current)} /></div>
                <div className="space-y-2"><Label>Vehicle Available To</Label><Input type="date" value={form.vehicleAvailableTo} disabled={!selectedAvailableVehicles.length} onChange={(event) => setForm((current) => current ? { ...current, vehicleAvailableTo: event.target.value } : current)} /></div>
              </div>
            </div>
          )}

          <SheetFooter>
            <Button variant="outline" onClick={closeEditSheet} disabled={isUpdating}>Cancel</Button>
            <Button onClick={handleSave} disabled={isUpdating || !form}>{isUpdating ? <Loader2 className="size-4 animate-spin" /> : null}Save Changes</Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  )
}