import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface LocationDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  editingLocationId: string | null;
  locationState: string; // stateId
  setLocationState: (id: string) => void;
  locationDistrict: string; // districtId
  setLocationDistrict: (id: string) => void;
  locationCity: string;
  setLocationCity: (city: string) => void;
  locationActiveFrom: string;
  setLocationActiveFrom: (date: string) => void;
  locationActiveTo: string;
  setLocationActiveTo: (date: string) => void;
  locationStatus: string;
  setLocationStatus: (status: string) => void;
  allStates: any[];
  allDistricts: any[];
  onSave: () => void;
}

export const LocationDialog: React.FC<LocationDialogProps> = ({
  isOpen, onOpenChange, editingLocationId, locationState, setLocationState, 
  locationDistrict, setLocationDistrict, locationCity, setLocationCity, 
  locationActiveFrom, setLocationActiveFrom, 
  locationActiveTo, setLocationActiveTo, locationStatus, setLocationStatus,
  allStates, allDistricts, onSave
}) => {
  const filteredDistricts = React.useMemo(() => {
    if (!locationState) return [];
    return (allDistricts || []).filter((d: any) => d.stateId === locationState);
  }, [allDistricts, locationState]);

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{editingLocationId ? 'Edit Location' : 'Add Location'}</DialogTitle>
          <DialogDescription>{editingLocationId ? 'Modify dealership location details' : 'Add a new dealership location (Area/City)'}</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">State</Label>
            <Select
              value={locationState}
              onValueChange={(value) => {
                setLocationState(value);
                setLocationDistrict('');
              }}
            >
              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                <SelectValue placeholder="Select state" />
              </SelectTrigger>
              <SelectContent>
                {(allStates || []).map((state: any) => (
                  <SelectItem key={state.id} value={state.id}>
                    {state.name || state.stateName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">City</Label>
            <Input
              placeholder="Enter city name"
              className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-red-500/30 focus-visible:border-red-500"
              value={locationCity}
              onChange={(e) => setLocationCity(e.target.value)}
            />
          </div>
          <div>
            <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">District</Label>
            <Select value={locationDistrict} onValueChange={setLocationDistrict} disabled={!locationState}>
              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                <SelectValue placeholder={locationState ? 'Select district' : 'Select state first'} />
              </SelectTrigger>
              <SelectContent>
                {filteredDistricts.map((district: any) => (
                  <SelectItem key={district.id} value={district.id}>
                    {district.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="border rounded-lg p-4 bg-gradient-to-br from-blue-50 to-cyan-50 border-blue-200">
            <Label className="items-center gap-2 text-sm leading-none font-medium text-blue-900 mb-3 block">Active Period</Label>
            <p className="text-xs text-blue-700 mb-3">Define the time period when this location will be available for dealership applications</p>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">Start Date</Label>
                <Input
                  type="date"
                  className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-blue-500/30 focus-visible:border-blue-500"
                  value={locationActiveFrom}
                  onChange={(e) => setLocationActiveFrom(e.target.value)}
                />
              </div>
              <div>
                <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">End Date</Label>
                <Input
                  type="date"
                  className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-blue-500/30 focus-visible:border-blue-500"
                  value={locationActiveTo}
                  onChange={(e) => setLocationActiveTo(e.target.value)}
                />
              </div>
            </div>
          </div>

          <div>
            <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">Opportunity</Label>
            <Select value={locationStatus} onValueChange={setLocationStatus}>
              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                <SelectValue placeholder="Is this an active Opportunity?" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="active">Yes</SelectItem>
                <SelectItem value="inactive">No</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex gap-3 pt-4">
            <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button className="flex-1 bg-re-red hover:bg-re-red-hover text-white shadow-md hover:shadow-lg transition-all" onClick={onSave}>Save Location</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

