"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Eye,
  Heart,
  Phone,
  MessageSquare,
  TrendingUp,
  Star,
  Building,
  CheckCircle,
  AlertCircle,
  Clock,
  ArrowRight,
  BarChart3,
  Loader2,
  ArrowUpRight
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { DataAPI } from "@/lib/data-api"
import { useAuth } from "@/hooks/use-auth"
import { useSubscription } from "@/hooks/use-subscription"
import { useToast } from "@/components/ui/toast"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CreditCard } from "lucide-react"
import { formatLocationDisplay } from "@/lib/location-utils"

// Types for API responses
interface Facility {
  _id: string
  name: string
  slug: string
  description: string
  status: string
  verified: boolean
  rating: number
  reviewCount: number
  viewCount: number
  favorites: number
  inquiries: number
  location: {
    city: string
    state: string
  }
  careTypes: string[]
  images: Array<{
    url: string
    isPrimary: boolean
  }>
  createdAt: string
  updatedAt: string
}

interface FacilityStats {
  totalFacilities: number
  activeFacilities: number
  pendingFacilities: number
  draftFacilities: number
  totalViews: number
  totalFavorites: number
  totalInquiries: number
  averageRating: number
}

export default function FacilityOwnerDashboard() {
  const [facilities, setFacilities] = useState<Facility[]>([])
  const [stats, setStats] = useState<FacilityStats | null>(null)
  const [loading, setLoading] = useState(true)
  const toast = useToast()
  const [error, setError] = useState<string | null>(null)
  const { user, isAuthenticated } = useAuth()
  const { isSubscribed, status: subscriptionStatus, grandfatheredFacilities } = useSubscription()

  // Load dashboard data
  useEffect(() => {
    if (isAuthenticated && user?.role === 'facility_owner') {
      loadDashboardData()
    }
  }, [isAuthenticated, user])

  const loadDashboardData = async () => {
    try {
      setLoading(true)
      setError(null)

      // Load facilities and stats in parallel
      const [facilitiesResponse, statsResponse] = await Promise.all([
        DataAPI.facilities.getMyFacilities({ limit: 5 }),
        DataAPI.facilities.getFacilityStats()
      ])

      if (facilitiesResponse.success && facilitiesResponse.data?.facilities) {
        setFacilities(facilitiesResponse.data.facilities as unknown as Facility[])
      }

      if (statsResponse.success && statsResponse.data?.stats) {
        setStats(statsResponse.data.stats)
      }

    } catch (error) {
      console.error('Failed to load dashboard data:', error)
      setError('Failed to load dashboard data. Please try again.')
      toast.error("Failed to load dashboard data. Please try again.", { title: "Error" })
    } finally {
      setLoading(false)
    }
  }

  // Show loading state
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="text-center">
          <Loader2 className="h-10 w-10 animate-spin mx-auto mb-4 text-[#3F5CEA]" />
          <p className="text-sm text-gray-600 font-medium">Loading dashboard...</p>
        </div>
      </div>
    )
  }

  // Show error state
  if (error) {
    return (
      <div className="text-center py-16">
        <div className="bg-red-50 border border-red-100 rounded-xl p-8 max-w-md mx-auto">
          <AlertCircle className="h-14 w-14 text-red-500 mx-auto mb-4" />
          <h3 className="text-xl font-semibold text-gray-900 mb-2">
            Failed to Load Dashboard
          </h3>
          <p className="text-sm text-gray-600 mb-6">{error}</p>
          <Button onClick={loadDashboardData} className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
            Try Again
          </Button>
        </div>
      </div>
    )
  }

  // Get primary facility for display (first active facility or first facility)
  const primaryFacility = facilities.find(f => f.status === 'active') || facilities[0]

  return (
    <div className="space-y-8">
      {/* Header Section */}
      <div className="space-y-2">
        <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
          Dashboard
        </h1>
        <p className="text-base text-gray-600">
          Welcome back! Here's how your facilities are performing.
        </p>
      </div>

      {/* Subscription Status Banner */}
      {!isSubscribed && subscriptionStatus === 'inactive' && (
        <Alert className="border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
          <CreditCard className="h-5 w-5 text-blue-600" />
          <AlertTitle className="text-blue-900 font-semibold">Subscription Required</AlertTitle>
          <AlertDescription className="text-blue-800">
            {grandfatheredFacilities.length > 0 ? (
              <>
                You have {grandfatheredFacilities.length} grandfathered {grandfatheredFacilities.length === 1 ? 'facility' : 'facilities'}.
                Subscribe now to claim new facilities and access all management features.
              </>
            ) : (
              <>
                Subscribe to claim and manage facilities, reply to reviews, and access all features for just $19.99/month.
              </>
            )}
            <Link href="/facility-owner/subscription" className="ml-2">
              <Button variant="link" className="h-auto p-0 text-blue-600 font-semibold">
                Subscribe Now →
              </Button>
            </Link>
          </AlertDescription>
        </Alert>
      )}

      {subscriptionStatus === 'past_due' && (
        <Alert variant="destructive" className="border-orange-200 bg-orange-50">
          <AlertCircle className="h-5 w-5 text-orange-600" />
          <AlertTitle className="text-orange-900 font-semibold">Payment Failed</AlertTitle>
          <AlertDescription className="text-orange-800">
            Your subscription payment failed. Please update your payment method to avoid service interruption.
            <Link href="/facility-owner/subscription" className="ml-2">
              <Button variant="link" className="h-auto p-0 text-orange-600 font-semibold">
                Update Payment Method →
              </Button>
            </Link>
          </AlertDescription>
        </Alert>
      )}

      {/* Primary Facility Card */}
      {primaryFacility && (
        <Card className="border-2 border-blue-100 bg-gradient-to-br from-blue-50/50 to-indigo-50/30 shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <div className="flex items-start justify-between gap-6">
              <div className="flex items-start gap-4 flex-1">
                {primaryFacility?.images?.find(img => img.isPrimary)?.url ? (
                  <div className="relative flex-shrink-0">
                    <Image
                      src={primaryFacility.images.find(img => img.isPrimary)!.url}
                      alt={primaryFacility.name}
                      width={96}
                      height={96}
                      className="rounded-xl object-cover shadow-sm border border-gray-200"
                    />
                    {primaryFacility?.verified && (
                      <div className="absolute -top-2 -right-2">
                        <div className="bg-green-500 rounded-full p-1.5 shadow-sm">
                          <CheckCircle className="h-4 w-4 text-white" />
                        </div>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center shadow-sm flex-shrink-0">
                    <Building className="h-10 w-10 text-gray-400" />
                  </div>
                )}
                <div className="flex-1 min-w-0">
                  <div className="flex items-start gap-3 mb-1">
                    <h2 className="text-2xl font-bold text-gray-900">
                      {primaryFacility?.name || "No facilities yet"}
                    </h2>
                    {primaryFacility?.verified && (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100 border-green-200">
                        Verified
                      </Badge>
                    )}
                  </div>
                  <p className="text-sm text-gray-600 mb-3">
                    {primaryFacility?.careTypes?.[0] || "Care Type"} • {primaryFacility ? formatLocationDisplay(primaryFacility) : 'Location not available'}
                  </p>
                  <div className="flex items-center gap-6">
                    <div className="flex items-center gap-1.5">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm font-semibold text-gray-900">{primaryFacility?.rating?.toFixed(1) || "0.0"}</span>
                      <span className="text-sm text-gray-500">({primaryFacility?.reviewCount || 0} reviews)</span>
                    </div>
                    <Badge
                      variant="secondary"
                      className={`${primaryFacility?.status === 'active'
                        ? 'bg-green-100 text-green-800 border-green-200'
                        : 'bg-gray-100 text-gray-800 border-gray-200'
                        }`}
                    >
                      {primaryFacility?.status || "Draft"}
                    </Badge>
                  </div>
                </div>
              </div>

            </div>
          </CardHeader>
        </Card>
      )}

      {/* KPI Cards - Professional Design */}
      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Key Metrics</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {/* Profile Views */}
          <Card className="border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all bg-white">
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="p-3 bg-blue-50 rounded-xl">
                  <Eye className="h-6 w-6 text-blue-600" />
                </div>
                <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full flex items-center gap-1">
                  <TrendingUp className="h-3 w-3" />
                  Live
                </span>
              </div>
              <div className="space-y-1">
                <p className="text-sm font-medium text-gray-600">Profile Views</p>
                <p className="text-3xl font-bold text-gray-900 tracking-tight">
                  {stats?.totalViews?.toLocaleString() || "0"}
                </p>
                <p className="text-xs text-gray-500">
                  Across all facilities
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Contact Clicks */}
          <Card className="border border-gray-200 hover:border-green-300 hover:shadow-md transition-all bg-white">
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="p-3 bg-green-50 rounded-xl">
                  <Phone className="h-6 w-6 text-green-600" />
                </div>
                <span className="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
                  Active
                </span>
              </div>
              <div className="space-y-1">
                <p className="text-sm font-medium text-gray-600">Contact Clicks</p>
                <p className="text-3xl font-bold text-gray-900 tracking-tight">
                  {stats?.totalInquiries || 0}
                </p>
                <p className="text-xs text-gray-500">
                  Inquiries received
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Favorites */}
          <Card className="border border-gray-200 hover:border-red-300 hover:shadow-md transition-all bg-white">
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="p-3 bg-red-50 rounded-xl">
                  <Heart className="h-6 w-6 text-red-600" />
                </div>
                <span className="text-xs font-medium text-purple-600 bg-purple-50 px-2 py-1 rounded-full">
                  Popular
                </span>
              </div>
              <div className="space-y-1">
                <p className="text-sm font-medium text-gray-600">Favorites</p>
                <p className="text-3xl font-bold text-gray-900 tracking-tight">
                  {stats?.totalFavorites || 0}
                </p>
                <p className="text-xs text-gray-500">
                  Saved by families
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Total Reviews */}
          <Card className="border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all bg-white">
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="p-3 bg-purple-50 rounded-xl">
                  <MessageSquare className="h-6 w-6 text-purple-600" />
                </div>
                <div className="flex items-center gap-1">
                  <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                  <span className="text-xs font-medium text-gray-600">
                    {stats?.averageRating?.toFixed(1) || "0.0"}
                  </span>
                </div>
              </div>
              <div className="space-y-1">
                <p className="text-sm font-medium text-gray-600">Total Reviews</p>
                <p className="text-3xl font-bold text-gray-900 tracking-tight">
                  {facilities.reduce((sum, facility) => sum + (facility.reviewCount || 0), 0)}
                </p>
                <p className="text-xs text-gray-500">
                  Customer feedback
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Your Facilities */}
        <Card className="border border-gray-200 shadow-sm">
          <CardHeader className="border-b border-gray-100 bg-gray-50/50">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-blue-100 rounded-lg">
                  <Building className="h-5 w-5 text-blue-600" />
                </div>
                <div>
                  <CardTitle className="text-lg font-semibold text-gray-900">Your Facilities</CardTitle>
                  <CardDescription className="text-sm text-gray-600">Manage your properties</CardDescription>
                </div>
              </div>
              <Badge variant="secondary" className="bg-blue-50 text-blue-700 border-blue-200">
                {facilities.length} {facilities.length === 1 ? 'facility' : 'facilities'}
              </Badge>
            </div>
          </CardHeader>
          <CardContent className="pt-6">
            {facilities.length > 0 ? (
              <div className="space-y-3">
                {facilities.slice(0, 3).map((facility) => (
                  <div
                    key={facility._id}
                    className="flex items-center gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 border border-gray-200 hover:border-gray-300 transition-all cursor-pointer group"
                  >
                    <div className="p-2.5 bg-white rounded-lg border border-gray-200 group-hover:border-blue-300 transition-colors">
                      <Building className="h-5 w-5 text-gray-600 group-hover:text-blue-600 transition-colors" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-semibold text-gray-900 truncate">
                        {facility.name}
                      </p>
                      <p className="text-xs text-gray-600">
                        {formatLocationDisplay(facility)}
                      </p>
                      <div className="flex items-center gap-2 mt-1">
                        <Clock className="h-3 w-3 text-gray-400" />
                        <p className="text-xs text-gray-500">
                          Updated {new Date(facility.updatedAt).toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                    <Badge
                      variant="secondary"
                      className={`${facility.status === 'active'
                        ? 'bg-green-100 text-green-800 border-green-200'
                        : 'bg-gray-100 text-gray-600 border-gray-200'
                        } text-xs`}
                    >
                      {facility.status}
                    </Badge>
                  </div>
                ))}
                {facilities.length > 3 && (
                  <p className="text-xs text-gray-500 text-center py-3 bg-gray-50 rounded-lg border border-dashed border-gray-300">
                    +{facilities.length - 3} more {facilities.length - 3 === 1 ? 'facility' : 'facilities'}
                  </p>
                )}
              </div>
            ) : (
              <div className="text-center py-12">
                <div className="p-4 bg-gray-50 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center">
                  <Building className="h-10 w-10 text-gray-400" />
                </div>
                <h3 className="text-base font-semibold text-gray-900 mb-2">
                  No facilities yet
                </h3>
                <p className="text-sm text-gray-600 mb-6 max-w-sm mx-auto">
                  Claim your first facility to start connecting with families
                </p>
                <Link href="/facility-owner/facilities/claim">
                  <Button className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
                    <Building className="h-4 w-4 mr-2" />
                    Claim Facility
                  </Button>
                </Link>
              </div>
            )}
            <div className="mt-5 pt-5 border-t border-gray-100">
              <Link href="/facility-owner/facilities">
                <Button variant="outline" className="w-full border-gray-300 hover:bg-gray-50">
                  Manage All Facilities
                  <ArrowUpRight className="h-4 w-4 ml-2" />
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        {/* Facility Statistics */}
        <Card className="border border-gray-200 shadow-sm">
          <CardHeader className="border-b border-gray-100 bg-gray-50/50">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-purple-100 rounded-lg">
                <BarChart3 className="h-5 w-5 text-purple-600" />
              </div>
              <div>
                <CardTitle className="text-lg font-semibold text-gray-900">Facility Statistics</CardTitle>
                <CardDescription className="text-sm text-gray-600">Overview of your facilities</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="space-y-5">
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200">
                <span className="text-sm font-medium text-gray-700">Total Facilities</span>
                <span className="text-2xl font-bold text-gray-900">{stats?.totalFacilities || 0}</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-green-50 rounded-xl border border-green-200">
                <span className="text-sm font-medium text-green-700">Active Facilities</span>
                <span className="text-2xl font-bold text-green-700">{stats?.activeFacilities || 0}</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-yellow-50 rounded-xl border border-yellow-200">
                <span className="text-sm font-medium text-yellow-700">Pending Facilities</span>
                <span className="text-2xl font-bold text-yellow-700">{stats?.pendingFacilities || 0}</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200">
                <span className="text-sm font-medium text-gray-700">Draft Facilities</span>
                <span className="text-2xl font-bold text-gray-600">{stats?.draftFacilities || 0}</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-blue-50 rounded-xl border border-blue-200">
                <div className="flex items-center gap-2">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="text-sm font-medium text-blue-700">Average Rating</span>
                </div>
                <span className="text-2xl font-bold text-blue-700">{stats?.averageRating?.toFixed(1) || "0.0"}</span>
              </div>
            </div>
            <div className="mt-5 pt-5 border-t border-gray-100">
              <Link href="/facility-owner/analytics">
                <Button variant="outline" className="w-full border-gray-300 hover:bg-gray-50">
                  View Detailed Analytics
                  <ArrowUpRight className="h-4 w-4 ml-2" />
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}


      {/* Account Status */}

    </div>
  )
}