"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface CourtOccupancy {
  courtId: string;
  courtName: string;
  availableHours: number;
  bookedHours: number;
  occupancyPercent: number;
}

interface OccupancyChartProps {
  data: CourtOccupancy[];
  isLoading?: boolean;
}

export function OccupancyChart({ data, isLoading = false }: OccupancyChartProps) {
  if (isLoading) {
    return <OccupancyChartSkeleton />;
  }

  if (data.length === 0) {
    return (
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-lg flex items-center gap-2">
            <svg
              className="w-5 h-5 text-primary-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              />
            </svg>
            Court Occupancy
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-primary-500">
            <svg
              className="w-12 h-12 mb-2 opacity-50"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M20 12H4M12 20V4"
              />
            </svg>
            <p className="text-sm">No courts configured</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Calculate overall occupancy
  const totalAvailable = data.reduce((sum, c) => sum + c.availableHours, 0);
  const totalBooked = data.reduce((sum, c) => sum + c.bookedHours, 0);
  const overallOccupancy = totalAvailable > 0
    ? Math.round((totalBooked / totalAvailable) * 100)
    : 0;

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg flex items-center gap-2">
            <svg
              className="w-5 h-5 text-primary-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              />
            </svg>
            Court Occupancy
          </CardTitle>
          <div className="flex items-center gap-2">
            <span
              className={cn(
                "text-2xl font-bold",
                overallOccupancy >= 80
                  ? "text-green-600"
                  : overallOccupancy >= 50
                  ? "text-blue-600"
                  : "text-primary-600"
              )}
            >
              {overallOccupancy}%
            </span>
            <span className="text-sm text-primary-500">total</span>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {data.map((court) => (
            <div key={court.courtId}>
              <div className="flex items-center justify-between mb-1">
                <span className="text-sm font-medium text-primary-700">
                  {court.courtName}
                </span>
                <span className="text-sm text-primary-500">
                  {court.bookedHours}h / {court.availableHours}h
                </span>
              </div>
              <div className="relative h-4 bg-gray-100 rounded-full overflow-hidden">
                {/* Available bar (background) */}
                <div className="absolute inset-0 bg-green-100"></div>
                {/* Booked bar */}
                <div
                  className={cn(
                    "absolute inset-y-0 left-0 rounded-full transition-all duration-500",
                    court.occupancyPercent >= 80
                      ? "bg-blue-500"
                      : court.occupancyPercent >= 50
                      ? "bg-blue-400"
                      : "bg-blue-300"
                  )}
                  style={{ width: `${court.occupancyPercent}%` }}
                ></div>
              </div>
              <div className="flex items-center justify-between mt-1">
                <span
                  className={cn(
                    "text-xs font-medium",
                    court.occupancyPercent >= 80
                      ? "text-blue-600"
                      : court.occupancyPercent >= 50
                      ? "text-blue-500"
                      : "text-primary-500"
                  )}
                >
                  {court.occupancyPercent}% booked
                </span>
                <span className="text-xs text-green-600">
                  {court.availableHours - court.bookedHours}h available
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Legend */}
        <div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-primary-100">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-blue-400"></div>
            <span className="text-xs text-primary-500">Booked</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-green-100"></div>
            <span className="text-xs text-primary-500">Available</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// Loading skeleton
export function OccupancyChartSkeleton() {
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div className="h-6 bg-primary-100 rounded w-40 animate-pulse"></div>
          <div className="h-8 bg-primary-100 rounded w-16 animate-pulse"></div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="animate-pulse">
              <div className="flex items-center justify-between mb-1">
                <div className="h-4 bg-primary-100 rounded w-24"></div>
                <div className="h-4 bg-primary-100 rounded w-16"></div>
              </div>
              <div className="h-4 bg-primary-100 rounded-full"></div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}