"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Building, Search, Filter, Eye, CheckCircle, XCircle, Clock,
  Loader2, AlertCircle
} from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"

const US_STATES = [
  'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
  'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
  'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
  'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
  'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
]

export default function AdminClaimsPage() {
  const router = useRouter()
  const toast = useToast()
  const [loading, setLoading] = useState(true)
  const [claims, setClaims] = useState<any[]>([])
  const [pagination, setPagination] = useState<any>(null)
  
  // Filters
  const [statusFilter, setStatusFilter] = useState('')
  const [stateFilter, setStateFilter] = useState('')
  const [facilityNameSearch, setFacilityNameSearch] = useState('')
  const [ownerNameSearch, setOwnerNameSearch] = useState('')
  const [page, setPage] = useState(1)

  useEffect(() => {
    loadClaims()
  }, [page, statusFilter, stateFilter])

  const loadClaims = async () => {
    try {
      setLoading(true)

      const params: any = {
        page,
        limit: 20
      }

      if (statusFilter) params.status = statusFilter
      if (stateFilter) params.state = stateFilter
      if (facilityNameSearch) params.facilityName = facilityNameSearch
      if (ownerNameSearch) params.ownerName = ownerNameSearch

      const response = await DataAPI.admin.getClaims(params)

      if (response.success && response.data) {
        setClaims(response.data.claims || [])
        setPagination(response.data.pagination)
      } else {
        throw new Error(response.message || 'Failed to load claims')
      }
    } catch (error) {
      console.error('Failed to load claims:', error)
      toast.error("Failed to load claim requests. Please try again.", { title: "Error" })
    } finally {
      setLoading(false)
    }
  }

  const handleSearch = () => {
    setPage(1)
    loadClaims()
  }

  const clearFilters = () => {
    setStatusFilter('')
    setStateFilter('')
    setFacilityNameSearch('')
    setOwnerNameSearch('')
    setPage(1)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'pending':
        return (
          <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200 hover:bg-yellow-100">
            <Clock className="h-3 w-3 mr-1" />
            Pending
          </Badge>
        )
      case 'approved':
        return (
          <Badge className="bg-green-100 text-green-800 border-green-200 hover:bg-green-100">
            <CheckCircle className="h-3 w-3 mr-1" />
            Approved
          </Badge>
        )
      case 'rejected':
        return (
          <Badge className="bg-red-100 text-red-800 border-red-200 hover:bg-red-100">
            <XCircle className="h-3 w-3 mr-1" />
            Rejected
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const pendingCount = claims.filter(c => c.claimRequest.status === 'pending').length

  return (
    <div className="p-3 md:p-6 lg:p-8 space-y-4 md:space-y-8">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">
            Facility Claim Requests
          </h1>
          <p className="text-sm md:text-base text-gray-600 mt-1 md:mt-2">
            Review and approve facility ownership claims
          </p>
        </div>
        {pendingCount > 0 && (
          <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200 text-lg px-4 py-2 w-fit">
            {pendingCount} Pending
          </Badge>
        )}
      </div>

      {/* Filters */}
      <Card className="shadow-sm">
        <CardHeader className="pb-4">
          <CardTitle className="flex items-center gap-2 text-lg">
            <Filter className="h-5 w-5 text-[#3F5CEA]" />
            Filters
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* Status Filter */}
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">Status</label>
              <Select value={statusFilter || undefined} onValueChange={(value) => setStatusFilter(value)}>
                <SelectTrigger className="h-11">
                  <SelectValue placeholder="All Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="approved">Approved</SelectItem>
                  <SelectItem value="rejected">Rejected</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* State Filter */}
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">State</label>
              <Select value={stateFilter || undefined} onValueChange={(value) => setStateFilter(value)}>
                <SelectTrigger className="h-11">
                  <SelectValue placeholder="All States" />
                </SelectTrigger>
                <SelectContent>
                  {US_STATES.map(state => (
                    <SelectItem key={state} value={state}>{state}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Facility Name Search */}
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">Facility Name</label>
              <Input
                className="h-11"
                placeholder="Search facility..."
                value={facilityNameSearch}
                onChange={(e) => setFacilityNameSearch(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              />
            </div>

            {/* Owner Name Search */}
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">Owner Name</label>
              <Input
                className="h-11"
                placeholder="Search owner..."
                value={ownerNameSearch}
                onChange={(e) => setOwnerNameSearch(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              />
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-3 pt-2">
            <Button onClick={handleSearch} className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90 h-11 px-6">
              <Search className="h-4 w-4 mr-2" />
              Search
            </Button>
            {(statusFilter || stateFilter || facilityNameSearch || ownerNameSearch) && (
              <Button variant="outline" onClick={clearFilters} className="h-11 px-6">
                Clear Filters
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Claims Table */}
      {loading ? (
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <Loader2 className="h-10 w-10 animate-spin mx-auto mb-4 text-[#3F5CEA]" />
            <p className="text-gray-600">Loading claim requests...</p>
          </div>
        </div>
      ) : claims.length > 0 ? (
        <Card className="shadow-sm">
          <Table>
            <TableHeader>
              <TableRow className="bg-gray-50">
                <TableHead className="font-semibold">Facility</TableHead>
                <TableHead className="font-semibold">Owner</TableHead>
                <TableHead className="font-semibold">Location</TableHead>
                <TableHead className="font-semibold">Submitted</TableHead>
                <TableHead className="font-semibold">Status</TableHead>
                <TableHead className="text-right font-semibold">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {claims.map((claim, index) => {
                const claimId = `${claim.facility._id}:${claim.claimRequest.userId}`
                return (
                  <TableRow key={index} className="hover:bg-gray-50 transition-colors">
                    <TableCell className="py-4">
                      <div className="flex items-start gap-3">
                        <div className="mt-1">
                          <Building className="h-5 w-5 text-blue-500" />
                        </div>
                        <div className="min-w-0">
                          <p className="font-medium text-gray-900">
                            {claim.facility.name}
                          </p>
                          <p className="text-xs text-gray-500">
                            License: {claim.facility.licensing.licenseNumber}
                          </p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="py-4">
                      <div className="space-y-1">
                        <p className="font-medium text-gray-900">
                          {claim.owner?.firstName} {claim.owner?.lastName}
                        </p>
                        {claim.owner?.companyName && (
                          <p className="text-xs text-gray-600">
                            {claim.owner.companyName}
                          </p>
                        )}
                        <p className="text-xs text-gray-500">
                          {claim.owner?.email}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell className="py-4">
                      <p className="text-sm text-gray-900 font-medium">
                        {claim.facility.location.city}, {claim.facility.location.state}
                      </p>
                    </TableCell>
                    <TableCell className="py-4">
                      <p className="text-sm text-gray-700">
                        {new Date(claim.claimRequest.requestedAt).toLocaleDateString('en-US', {
                          year: 'numeric',
                          month: 'short',
                          day: 'numeric'
                        })}
                      </p>
                    </TableCell>
                    <TableCell className="py-4">
                      {getStatusBadge(claim.claimRequest.status)}
                    </TableCell>
                    <TableCell className="text-right py-4">
                      <Link href={`/admin/facilities/claims/${claimId}`}>
                        <Button variant="outline" size="sm" className="gap-2">
                          <Eye className="h-4 w-4" />
                          Review
                        </Button>
                      </Link>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>

          {/* Pagination */}
          {pagination && pagination.totalPages > 1 && (
            <div className="flex items-center justify-between gap-4 p-6 border-t bg-gray-50">
              <div className="text-sm text-gray-600">
                Showing <span className="font-medium">{((page - 1) * (pagination.limit || 20)) + 1}</span> to{' '}
                <span className="font-medium">{Math.min(page * (pagination.limit || 20), pagination.total || 0)}</span> of{' '}
                <span className="font-medium">{pagination.total || 0}</span> results
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  disabled={page === 1}
                  onClick={() => setPage(page - 1)}
                  className="h-9"
                >
                  Previous
                </Button>
                <span className="text-sm text-gray-700 px-4">
                  Page <span className="font-medium">{page}</span> of <span className="font-medium">{pagination.totalPages}</span>
                </span>
                <Button
                  variant="outline"
                  disabled={page === pagination.totalPages}
                  onClick={() => setPage(page + 1)}
                  className="h-9"
                >
                  Next
                </Button>
              </div>
            </div>
          )}
        </Card>
      ) : (
        <Card className="shadow-sm">
          <CardContent className="flex flex-col items-center justify-center min-h-[400px] py-12">
            <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
              <AlertCircle className="h-8 w-8 text-gray-400" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              No Claim Requests Found
            </h3>
            <p className="text-gray-600 text-center max-w-md mb-4">
              {statusFilter || stateFilter || facilityNameSearch || ownerNameSearch
                ? 'No claim requests match your current filters. Try adjusting your search criteria.'
                : 'No facility claim requests have been submitted yet.'}
            </p>
            {(statusFilter || stateFilter || facilityNameSearch || ownerNameSearch) && (
              <Button variant="outline" onClick={clearFilters} className="mt-2">
                Clear All Filters
              </Button>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}