import { useQuery } from "@tanstack/react-query";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";

export interface ScheduleEntry {
  venue_id: string;
  resource_type: string;
  resource_id: string;
  day_number: number;
  session: string;
}

interface VenueScheduleGridProps {
  venueIds: string[];
  onVenueIdsChange: (ids: string[]) => void;
  days: number;
  schedules: ScheduleEntry[];
  onScheduleChange: (schedules: ScheduleEntry[]) => void;
}

const SingleVenueGrid = ({
  venueId,
  venueName,
  days,
  schedules,
  onToggle,
  onRemove,
}: {
  venueId: string;
  venueName: string;
  days: number;
  schedules: ScheduleEntry[];
  onToggle: (venueId: string, resourceType: string, resourceId: string, day: number, session: string) => void;
  onRemove: () => void;
}) => {
  const { data: rooms } = useQuery({
    queryKey: ["venue-rooms", venueId],
    queryFn: async () => {
      const res = await fetch(`/api/admin/venues/${venueId}/rooms`);
      if (!res.ok) return [];
      return res.json();
    },
    enabled: !!venueId,
  });

  const { data: yards } = useQuery({
    queryKey: ["venue-yards", venueId],
    queryFn: async () => {
      const res = await fetch(`/api/admin/venues/${venueId}/yards`);
      if (!res.ok) return [];
      return res.json();
    },
    enabled: !!venueId,
  });

  const resources = [
    ...(rooms?.map((r: any) => ({ ...r, type: "room", label: `Room - ${r.name}` })) || []),
    ...(yards?.map((y: any) => ({ ...y, type: "yard", label: `Yard - ${y.name}` })) || []),
  ];

  const dayNumbers = Array.from({ length: days }, (_, i) => i + 1);
  const isChecked = (resourceId: string, day: number, session: string) =>
    schedules.some((s) => s.venue_id === venueId && s.resource_id === resourceId && s.day_number === day && s.session === session);

  if (resources.length === 0) {
    return (
      <div className="border border-border rounded-xl p-4">
        <div className="flex items-center justify-between mb-2">
          <h4 className="font-semibold text-foreground">{venueName}</h4>
          <Button variant="ghost" size="sm" onClick={onRemove}><Trash2 className="h-3.5 w-3.5 text-destructive" /></Button>
        </div>
        <p className="text-sm text-muted-foreground">No rooms or yards configured for this location.</p>
      </div>
    );
  }

  return (
    <div className="border border-border rounded-xl overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 bg-muted/30 border-b border-border">
        <h4 className="font-semibold text-foreground">{venueName}</h4>
        <Button variant="ghost" size="sm" onClick={onRemove}><Trash2 className="h-3.5 w-3.5 text-destructive" /></Button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left p-3 font-medium text-muted-foreground min-w-[200px]">Resource</th>
              {dayNumbers.map((d) => (
                <th key={d} colSpan={2} className="text-center p-2 font-medium text-foreground border-l border-border">
                  Day {d}
                </th>
              ))}
            </tr>
            <tr className="border-b border-border bg-muted/30">
              <th />
              {dayNumbers.map((d) => (
                <th key={d} colSpan={2} className="border-l border-border">
                  <div className="flex">
                    <span className="flex-1 text-center text-xs text-muted-foreground py-1">AM</span>
                    <span className="flex-1 text-center text-xs text-muted-foreground py-1">PM</span>
                  </div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {resources.map((r: any) => (
              <tr key={r.id} className="border-b border-border last:border-0 hover:bg-muted/20">
                <td className="p-3 font-medium">{r.label}</td>
                {dayNumbers.map((d) => (
                  <td key={d} colSpan={2} className="border-l border-border">
                    <div className="flex">
                      <div className="flex-1 flex justify-center py-2">
                        <Checkbox checked={isChecked(r.id, d, "am")} onCheckedChange={() => onToggle(venueId, r.type, r.id, d, "am")} />
                      </div>
                      <div className="flex-1 flex justify-center py-2">
                        <Checkbox checked={isChecked(r.id, d, "pm")} onCheckedChange={() => onToggle(venueId, r.type, r.id, d, "pm")} />
                      </div>
                    </div>
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const VenueScheduleGrid = ({ venueIds, onVenueIdsChange, days, schedules, onScheduleChange }: VenueScheduleGridProps) => {
  const { data: venues } = useQuery({
    queryKey: ["venues-list"],
    queryFn: async () => {
      const res = await fetch("/api/admin/venues?status=active");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const availableVenues = venues?.filter((v: any) => !venueIds.includes(v.id)) || [];

  const handleAddVenue = (id: string) => {
    if (id && !venueIds.includes(id)) {
      onVenueIdsChange([...venueIds, id]);
    }
  };

  const handleRemoveVenue = (id: string) => {
    onVenueIdsChange(venueIds.filter((v) => v !== id));
    onScheduleChange(schedules.filter((s) => s.venue_id !== id));
  };

  const handleToggle = (venueId: string, resourceType: string, resourceId: string, day: number, session: string) => {
    const exists = schedules.find(
      (s) => s.venue_id === venueId && s.resource_id === resourceId && s.day_number === day && s.session === session
    );
    if (exists) {
      onScheduleChange(schedules.filter(
        (s) => !(s.venue_id === venueId && s.resource_id === resourceId && s.day_number === day && s.session === session)
      ));
    } else {
      onScheduleChange([...schedules, { venue_id: venueId, resource_type: resourceType, resource_id: resourceId, day_number: day, session }]);
    }
  };

  const getVenueName = (id: string) => venues?.find((v: any) => v.id === id)?.name || "Unknown Location";

  return (
    <div className="space-y-4">
      {venueIds.length > 0 && (
        <div className="space-y-4">
          {venueIds.map((vid) => (
            <SingleVenueGrid
              key={vid}
              venueId={vid}
              venueName={getVenueName(vid)}
              days={days}
              schedules={schedules}
              onToggle={handleToggle}
              onRemove={() => handleRemoveVenue(vid)}
            />
          ))}
        </div>
      )}

      {availableVenues.length > 0 && (
        <div className="flex items-end gap-2 max-w-xs">
          <div className="flex-1 space-y-1">
            <Label className="font-semibold text-sm">Add Location</Label>
             <Select onValueChange={handleAddVenue}>
              <SelectTrigger><SelectValue placeholder="Select location..." /></SelectTrigger>
              <SelectContent>
                {availableVenues.map((v: any) => (
                  <SelectItem key={v.id} value={v.id}>{v.name}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      )}

      {venueIds.length === 0 && (
        <p className="text-sm text-muted-foreground">No locations assigned. Add a location above to configure resource scheduling.</p>
      )}
    </div>
  );
};

export default VenueScheduleGrid;