import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Calendar, MapPin, User, Car, Clock } from "lucide-react";
import { format, parseISO, isValid } from "date-fns";
import { it } from "date-fns/locale";

type Location = "roccapiemonte" | "milano" | "roma";

type MobileSite = {
  id: string;
  name: string;
  address: string;
  city: string;
  serviceTypeId: string;
  serviceTypeName: string;
  location: Location;
  latitude: number | null;
  longitude: number | null;
};

type AvailableGuard = {
  id: string;
  firstName: string;
  lastName: string;
  badgeNumber: string;
  location: Location;
  weeklyHours: number;
  availableHours: number;
};

export default function PlanningMobile() {
  const [selectedDate, setSelectedDate] = useState(format(new Date(), "yyyy-MM-dd"));
  const [selectedLocation, setSelectedLocation] = useState<Location>("roccapiemonte");
  const [selectedGuardId, setSelectedGuardId] = useState<string>("");

  // Query siti mobile per location
  const { data: mobileSites, isLoading: sitesLoading } = useQuery<MobileSite[]>({
    queryKey: ["/api/planning-mobile/sites", selectedLocation],
    queryFn: async () => {
      const response = await fetch(`/api/planning-mobile/sites?location=${selectedLocation}`);
      if (!response.ok) {
        throw new Error("Failed to fetch mobile sites");
      }
      return response.json();
    },
    enabled: !!selectedLocation,
  });

  // Query guardie disponibili per location e data
  const { data: availableGuards, isLoading: guardsLoading } = useQuery<AvailableGuard[]>({
    queryKey: ["/api/planning-mobile/guards", selectedLocation, selectedDate],
    queryFn: async () => {
      const response = await fetch(`/api/planning-mobile/guards?location=${selectedLocation}&date=${selectedDate}`);
      if (!response.ok) {
        throw new Error("Failed to fetch available guards");
      }
      return response.json();
    },
    enabled: !!selectedLocation && !!selectedDate,
  });

  const locationLabels: Record<Location, string> = {
    roccapiemonte: "Roccapiemonte",
    milano: "Milano",
    roma: "Roma",
  };

  const locationColors: Record<Location, string> = {
    roccapiemonte: "bg-blue-500",
    milano: "bg-green-500",
    roma: "bg-purple-500",
  };

  return (
    <div className="h-full flex flex-col p-6 space-y-6">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="text-3xl font-bold">Planning Mobile</h1>
        <p className="text-muted-foreground">
          Pianificazione ronde, ispezioni e interventi notturni per servizi mobili
        </p>
      </div>

      {/* Filtri */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            Filtri Pianificazione
          </CardTitle>
          <CardDescription>Seleziona sede, data e guardia per iniziare</CardDescription>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="space-y-2">
            <Label htmlFor="location-select">Sede*</Label>
            <Select value={selectedLocation} onValueChange={(v) => setSelectedLocation(v as Location)}>
              <SelectTrigger id="location-select" data-testid="select-mobile-location">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="roccapiemonte">Roccapiemonte</SelectItem>
                <SelectItem value="milano">Milano</SelectItem>
                <SelectItem value="roma">Roma</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="date-select">Data*</Label>
            <Input
              id="date-select"
              type="date"
              value={selectedDate}
              onChange={(e) => setSelectedDate(e.target.value)}
              data-testid="input-mobile-date"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="guard-select">Guardia (opzionale)</Label>
            <Select value={selectedGuardId} onValueChange={setSelectedGuardId}>
              <SelectTrigger id="guard-select" data-testid="select-mobile-guard">
                <SelectValue placeholder="Tutte le guardie" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="">Tutte le guardie</SelectItem>
                {availableGuards?.map((guard) => (
                  <SelectItem key={guard.id} value={guard.id}>
                    {guard.firstName} {guard.lastName} - #{guard.badgeNumber} ({guard.availableHours}h disponibili)
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Grid: Mappa + Siti */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-1">
        {/* Mappa Siti */}
        <Card className="flex flex-col">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MapPin className="h-5 w-5" />
              Mappa Siti Mobile
            </CardTitle>
            <CardDescription>
              {mobileSites?.length || 0} siti con servizi mobili in {locationLabels[selectedLocation]}
            </CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center bg-muted/20 rounded-lg">
            <div className="text-center space-y-2">
              <MapPin className="h-12 w-12 mx-auto text-muted-foreground" />
              <p className="text-sm text-muted-foreground">
                Integrazione mappa in sviluppo
                <br />
                (Leaflet/Google Maps)
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Lista Siti Mobile */}
        <Card className="flex flex-col">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              Siti con Servizi Mobili
            </CardTitle>
            <CardDescription>
              Ronde notturne, ispezioni, interventi programmati
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 overflow-y-auto">
            {sitesLoading ? (
              <p className="text-sm text-muted-foreground">Caricamento...</p>
            ) : mobileSites && mobileSites.length > 0 ? (
              mobileSites.map((site) => (
                <div
                  key={site.id}
                  className="p-4 border rounded-lg space-y-2 hover-elevate cursor-pointer"
                  data-testid={`site-card-${site.id}`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="space-y-1 flex-1">
                      <h4 className="font-semibold">{site.name}</h4>
                      <p className="text-sm text-muted-foreground flex items-center gap-1">
                        <MapPin className="h-3 w-3" />
                        {site.address}, {site.city}
                      </p>
                    </div>
                    <Badge className={locationColors[site.location]} data-testid={`badge-location-${site.id}`}>
                      {locationLabels[site.location]}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <Badge variant="outline" data-testid={`badge-service-${site.id}`}>
                      {site.serviceTypeName}
                    </Badge>
                  </div>
                  <div className="flex gap-2 pt-2">
                    <Button size="sm" variant="default" data-testid={`button-assign-${site.id}`}>
                      Assegna Guardia
                    </Button>
                    <Button size="sm" variant="outline" data-testid={`button-view-${site.id}`}>
                      Dettagli
                    </Button>
                  </div>
                </div>
              ))
            ) : (
              <div className="text-center py-8 space-y-2">
                <MapPin className="h-12 w-12 mx-auto text-muted-foreground" />
                <p className="text-sm text-muted-foreground">
                  Nessun sito con servizi mobili in {locationLabels[selectedLocation]}
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Guardie Disponibili */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <User className="h-5 w-5" />
            Guardie Disponibili ({availableGuards?.length || 0})
          </CardTitle>
          <CardDescription>
            Guardie con ore disponibili per {format(parseISO(selectedDate), "dd MMMM yyyy", { locale: it })}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            {guardsLoading ? (
              <p className="text-sm text-muted-foreground col-span-full">Caricamento...</p>
            ) : availableGuards && availableGuards.length > 0 ? (
              availableGuards.map((guard) => (
                <div
                  key={guard.id}
                  className="p-3 border rounded-lg space-y-2"
                  data-testid={`guard-card-${guard.id}`}
                >
                  <div className="flex items-center justify-between">
                    <div className="space-y-1">
                      <h5 className="font-semibold text-sm">
                        {guard.firstName} {guard.lastName}
                      </h5>
                      <p className="text-xs text-muted-foreground">#{guard.badgeNumber}</p>
                    </div>
                    <Badge className={locationColors[guard.location]}>
                      {locationLabels[guard.location]}
                    </Badge>
                  </div>
                  <div className="text-xs space-y-1">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Ore settimanali:</span>
                      <span className="font-medium">{guard.weeklyHours}h / 45h</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Disponibili:</span>
                      <span className="font-medium text-green-600">{guard.availableHours}h</span>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground col-span-full text-center py-4">
                Nessuna guardia disponibile per la data selezionata
              </p>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}