"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Building, MapPin, Calendar, FileText, CheckCircle, Clock, XCircle,
  Loader2, AlertCircle, Eye, Trash2
} from "lucide-react"
import Link from "next/link"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"
import { formatLocationDisplay } from "@/lib/location-utils"

export default function MyClaimsPage() {
  const [loading, setLoading] = useState(true)
  const toast = useToast()
  const [claims, setClaims] = useState<any[]>([])
  const [pagination, setPagination] = useState<any>(null)
  const [activeTab, setActiveTab] = useState('all')
  const [selectedClaim, setSelectedClaim] = useState<any>(null)
  const [withdrawing, setWithdrawing] = useState(false)
  const [showWithdrawDialog, setShowWithdrawDialog] = useState(false)
  const [page, setPage] = useState(1)

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

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

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

      if (activeTab !== 'all') {
        params.status = activeTab
      }

      const response = await DataAPI.facilities.getMyClaims(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 your claim requests. Please try again.", { title: "Error" })
    } finally {
      setLoading(false)
    }
  }

  const handleWithdrawClaim = async () => {
    if (!selectedClaim) return

    try {
      setWithdrawing(true)
      
      // ClaimId format: facilityId:userId
      const claimId = `${selectedClaim.facility._id}:${selectedClaim.claimRequest.userId}`
      
      const response = await DataAPI.facilities.withdrawClaim(claimId)

      if (response.success) {
        toast.success("Your claim request has been withdrawn successfully.", { title: "Claim Withdrawn" })
        
        setShowWithdrawDialog(false)
        setSelectedClaim(null)
        loadClaims()
      } else {
        throw new Error(response.message || 'Failed to withdraw claim')
      }
    } catch (error: any) {
      console.error('Failed to withdraw claim:', error)
      toast.error(error.message || 'Failed to withdraw claim request. Please try again.', { title: "Withdrawal Failed" })
    } finally {
      setWithdrawing(false)
    }
  }

  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 Review
          </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 ClaimCard = ({ claim }: { claim: any }) => {
    const isWithdrawable = claim.claimRequest.status === 'pending'

    return (
      <Card className="hover:shadow-md transition-shadow border border-gray-200">
        <CardContent className="p-6">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1 min-w-0">
              {/* Facility Name & Location */}
              <div className="flex items-start gap-3 mb-3">
                <div className="p-2 bg-blue-50 rounded-lg flex-shrink-0">
                  <Building className="h-5 w-5 text-blue-600" />
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="text-lg font-bold text-gray-900 truncate">
                    {claim.facility.name}
                  </h3>
                  <div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
                    <MapPin className="h-4 w-4 flex-shrink-0" />
                    <span className="truncate">
                      {formatLocationDisplay(claim.facility)}
                    </span>
                  </div>
                </div>
              </div>

              {/* Claim Details */}
              <div className="space-y-2 mb-4">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Calendar className="h-4 w-4" />
                  <span>
                    Submitted: {new Date(claim.claimRequest.requestedAt).toLocaleDateString()}
                  </span>
                </div>
                
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <FileText className="h-4 w-4" />
                  <span>
                    License: {claim.facility.licensing.licenseNumber}
                  </span>
                </div>
              </div>

              {/* Rejection Reason (if rejected) */}
              {claim.claimRequest.status === 'rejected' && claim.claimRequest.rejectionReason && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                  <p className="text-sm font-medium text-red-900 mb-1">Rejection Reason:</p>
                  <p className="text-sm text-red-800">{claim.claimRequest.rejectionReason}</p>
                </div>
              )}

              {/* Message Preview */}
              {claim.claimRequest.message && (
                <div className="bg-gray-50 rounded-lg p-3 mb-4">
                  <p className="text-sm text-gray-700 line-clamp-2">
                    {claim.claimRequest.message}
                  </p>
                </div>
              )}
            </div>

            {/* Status & Actions */}
            <div className="flex flex-col items-end gap-3 flex-shrink-0">
              {getStatusBadge(claim.claimRequest.status)}
              
              <div className="flex flex-col gap-2">
                <Link href={`/facility-owner/facilities/claim/${claim.facility._id}`}>
                  <Button variant="outline" size="sm" className="w-full">
                    <Eye className="h-3 w-3 mr-1" />
                    View Details
                  </Button>
                </Link>
                
                {isWithdrawable && (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setSelectedClaim(claim)
                      setShowWithdrawDialog(true)
                    }}
                    className="text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
                  >
                    <Trash2 className="h-3 w-3 mr-1" />
                    Withdraw
                  </Button>
                )}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
          My Claim Requests
        </h1>
        <p className="text-lg text-gray-600 mt-2">
          Track the status of your facility claim requests
        </p>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4 max-w-2xl">
          <TabsTrigger value="all">All</TabsTrigger>
          <TabsTrigger value="pending">Pending</TabsTrigger>
          <TabsTrigger value="approved">Approved</TabsTrigger>
          <TabsTrigger value="rejected">Rejected</TabsTrigger>
        </TabsList>

        <TabsContent value={activeTab} className="mt-6">
          {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 your claims...</p>
              </div>
            </div>
          ) : claims.length > 0 ? (
            <>
              {/* Claims List */}
              <div className="space-y-4">
                {claims.map((claim, index) => (
                  <ClaimCard key={index} claim={claim} />
                ))}
              </div>

              {/* Pagination */}
              {pagination && pagination.totalPages > 1 && (
                <div className="flex items-center justify-center gap-2 mt-8">
                  <Button
                    variant="outline"
                    disabled={page === 1}
                    onClick={() => setPage(page - 1)}
                  >
                    Previous
                  </Button>
                  <div className="flex items-center gap-2">
                    {Array.from({ length: Math.min(pagination.totalPages, 5) }, (_, i) => {
                      const pageNum = i + 1
                      return (
                        <Button
                          key={pageNum}
                          variant={page === pageNum ? "default" : "outline"}
                          onClick={() => setPage(pageNum)}
                          className={page === pageNum ? "bg-[#3F5CEA]" : ""}
                        >
                          {pageNum}
                        </Button>
                      )
                    })}
                  </div>
                  <Button
                    variant="outline"
                    disabled={page === pagination.totalPages}
                    onClick={() => setPage(page + 1)}
                  >
                    Next
                  </Button>
                </div>
              )}
            </>
          ) : (
            <Card className="border border-gray-200">
              <CardContent className="text-center py-16">
                <AlertCircle className="h-16 w-16 text-gray-400 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 mb-2">
                  No Claims Found
                </h3>
                <p className="text-gray-600 mb-6">
                  {activeTab === 'all'
                    ? "You haven't submitted any claim requests yet."
                    : `You don't have any ${activeTab} claim requests.`}
                </p>
                <Link href="/facility-owner/facilities/claim">
                  <Button className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
                    <Building className="h-4 w-4 mr-2" />
                    Search Facilities to Claim
                  </Button>
                </Link>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>

      {/* Withdraw Confirmation Dialog */}
      <Dialog open={showWithdrawDialog} onOpenChange={setShowWithdrawDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Withdraw Claim Request</DialogTitle>
            <DialogDescription>
              Are you sure you want to withdraw your claim request for{' '}
              <strong>{selectedClaim?.facility.name}</strong>?
              This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setShowWithdrawDialog(false)
                setSelectedClaim(null)
              }}
              disabled={withdrawing}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={handleWithdrawClaim}
              disabled={withdrawing}
            >
              {withdrawing ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Withdrawing...
                </>
              ) : (
                <>
                  <Trash2 className="h-4 w-4 mr-2" />
                  Withdraw Claim
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}