"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ClaimStatusBadge } from "@/components/ui/claim-status-badge"
import { Building, MapPin, FileText, ArrowRight, Lock, UserCheck } from "lucide-react"
import Link from "next/link"
import { formatLocationDisplay } from "@/lib/location-utils"

interface FacilityClaimCardProps {
  facility: {
    _id: string
    name: string
    location: {
      address: string
      city: string
      state: string
      zipCode: string
    }
    licensing: {
      licenseNumber: string
      licenseType?: string
    }
    careTypes: string[]
    capacity?: {
      totalLicensed: number
    }
    claimStatus: 'unclaimed' | 'claim_pending' | 'claimed'
    claimedBy?: {
      name?: string
      email?: string
      _id?: string
    }
    claimedAt?: string
    userClaimStatus?: 'pending' | 'approved' | 'rejected'
    userClaimDate?: string
  }
  onViewDetails?: (facilityId: string) => void
}

export function FacilityClaimCard({ facility, onViewDetails }: FacilityClaimCardProps) {
  const handleViewDetails = () => {
    if (onViewDetails) {
      onViewDetails(facility._id)
    }
  }

  const isClaimedByOther = facility.claimStatus === 'claimed' && !facility.userClaimStatus
  const isClaimPending = facility.claimStatus === 'claim_pending' && !facility.userClaimStatus

  return (
    <Card className={`hover:shadow-lg transition-all duration-300 border-2 ${
      isClaimedByOther 
        ? 'border-gray-300 bg-gray-50 opacity-80' 
        : isClaimPending
        ? 'border-orange-200 bg-orange-50/30'
        : 'border-gray-200 bg-white'
    }`}>
      <CardContent className="p-6">
        {/* Header */}
        <div className="flex items-start justify-between gap-4 mb-4">
          <div className="flex items-start gap-3 flex-1 min-w-0">
            <div className={`p-2.5 rounded-lg flex-shrink-0 ${
              isClaimedByOther 
                ? 'bg-gray-200' 
                : isClaimPending
                ? 'bg-orange-100'
                : 'bg-blue-50'
            }`}>
              {isClaimedByOther ? (
                <Lock className="h-6 w-6 text-gray-500" />
              ) : (
                <Building className={`h-6 w-6 ${isClaimPending ? 'text-orange-600' : 'text-blue-600'}`} />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <h3 className={`text-lg font-bold truncate mb-1 ${
                isClaimedByOther ? 'text-gray-600' : 'text-gray-900'
              }`}>
                {facility.name}
              </h3>
              <div className="flex items-center gap-2 text-sm text-gray-600 mb-2">
                <MapPin className="h-4 w-4 flex-shrink-0" />
                <span className="truncate">
                  {formatLocationDisplay(facility)}
                </span>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-2 items-end">
            <ClaimStatusBadge status={facility.claimStatus} />
            {facility.userClaimStatus && (
              <Badge 
                variant="outline" 
                className={`text-xs font-medium ${
                  facility.userClaimStatus === 'pending' 
                    ? 'bg-yellow-50 text-yellow-700 border-yellow-300'
                    : facility.userClaimStatus === 'approved'
                    ? 'bg-green-50 text-green-700 border-green-300'
                    : 'bg-red-50 text-red-700 border-red-300'
                }`}
              >
                Your Claim: {facility.userClaimStatus.charAt(0).toUpperCase() + facility.userClaimStatus.slice(1)}
              </Badge>
            )}
            {isClaimedByOther && (
              <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 text-xs">
                <UserCheck className="h-3 w-3 mr-1" />
                Claimed by Another Owner
              </Badge>
            )}
            {isClaimPending && (
              <Badge variant="outline" className="bg-orange-100 text-orange-700 border-orange-300 text-xs">
                Claim Pending Review
              </Badge>
            )}
          </div>
        </div>

        {/* Facility Details */}
        <div className="space-y-3 mb-4">
          {/* License Info */}
          <div className="flex items-center gap-2 text-sm">
            <FileText className="h-4 w-4 text-gray-400 flex-shrink-0" />
            <span className="text-gray-600">
              License: <span className="font-medium text-gray-900">{facility.licensing.licenseNumber}</span>
            </span>
          </div>

          {/* Address */}
          <div className="text-sm text-gray-600">
            <span className="font-medium">Address:</span> {facility.location.address}, {facility.location.zipCode}
          </div>

          {/* Care Types */}
          {facility.careTypes && facility.careTypes.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {facility.careTypes.slice(0, 3).map((type, index) => (
                <Badge 
                  key={index} 
                  variant="outline" 
                  className="text-xs border-gray-300 text-gray-700"
                >
                  {type}
                </Badge>
              ))}
              {facility.careTypes.length > 3 && (
                <Badge variant="outline" className="text-xs border-gray-300 text-gray-700">
                  +{facility.careTypes.length - 3} more
                </Badge>
              )}
            </div>
          )}

          {/* Capacity */}
          {facility.capacity && (
            <div className="text-sm text-gray-600">
              <span className="font-medium">Capacity:</span> {(facility.capacity.totalLicensed && facility.capacity.totalLicensed > 1) ? facility.capacity.totalLicensed : 6} beds
            </div>
          )}
        </div>

        {/* Action Button */}
        <div className="pt-4 border-t border-gray-100">
          {isClaimedByOther ? (
            <div className="space-y-2">
              <Button
                disabled
                variant="outline"
                className="w-full opacity-60 cursor-not-allowed"
              >
                <Lock className="h-4 w-4 mr-2" />
                Already Claimed
              </Button>
              {facility.claimedAt && (
                <p className="text-xs text-gray-500 mt-2 text-center">
                  Claimed on {new Date(facility.claimedAt).toLocaleDateString('en-US', {
                    month: 'short',
                    day: 'numeric',
                    year: 'numeric'
                  })}
                </p>
              )}
            </div>
          ) : isClaimPending ? (
            <div className="space-y-2">
              <Button
                disabled
                variant="outline"
                className="w-full"
              >
                <Lock className="h-4 w-4 mr-2" />
                Claim Under Review
              </Button>
              <p className="text-xs text-orange-600 mt-2 text-center font-medium">
                Another owner has submitted a claim
              </p>
            </div>
          ) : facility.userClaimStatus === 'pending' ? (
            <div className="space-y-2">
              <Button
                disabled
                variant="outline"
                className="w-full"
              >
                Under Review
              </Button>
              {facility.userClaimDate && (
                <p className="text-xs text-gray-500 mt-2 text-center">
                  Submitted: {new Date(facility.userClaimDate).toLocaleDateString('en-US', {
                    month: 'short',
                    day: 'numeric',
                    year: 'numeric'
                  })}
                </p>
              )}
            </div>
          ) : facility.userClaimStatus === 'approved' ? (
            <Link href={`/facility-owner/facilities/${facility._id}/edit`}>
              <Button className="w-full bg-green-600 hover:bg-green-700 transition-colors">
                Manage Facility
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            </Link>
          ) : onViewDetails ? (
            <Button
              onClick={handleViewDetails}
              className="w-full bg-[#3F5CEA] hover:bg-[#3F5CEA]/90 transition-colors"
            >
              View Details & Claim
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          ) : (
            <Link href={`/facility-owner/facilities/claim/${facility._id}`}>
              <Button className="w-full bg-[#3F5CEA] hover:bg-[#3F5CEA]/90 transition-colors">
                View Details & Claim
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            </Link>
          )}
        </div>
      </CardContent>
    </Card>
  )
}