import { MapPin, Plus, Eye, Calendar, Building2, Loader2, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { useState, useEffect } from 'react';
import { User as UserType } from '@/lib/mock-data';
import { toast } from 'sonner';
import { dealerService } from '@/services/dealer.service';
import { masterService } from '@/services/master.service';
import { formatDateTime } from '@/components/ui/utils';

interface DealerRelocationPageProps {
  currentUser: UserType | null;
  onViewDetails?: (id: string) => void;
}

const getStatusColor = (status: string) => {
  if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
  if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
  if (status.includes('Rejected') || status.includes('Revoked')) return 'bg-red-100 text-red-700 border-red-300';
  return 'bg-slate-100 text-slate-700 border-slate-300';
};

const getApiErrorMessage = (error: any, fallback: string) =>
  error?.response?.data?.message || error?.data?.message || error?.message || fallback;

export function DealerRelocationPage({ onViewDetails }: DealerRelocationPageProps) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [selectedOutlet, setSelectedOutlet] = useState<any | null>(null);
  const [newCity, setNewCity] = useState('');
  const [newState, setNewState] = useState('');
  const [newAddress, setNewAddress] = useState('');
  const [reason, setReason] = useState('');
  const [distance, setDistance] = useState('');
  const [propertyType, setPropertyType] = useState('');
  const [expectedDate, setExpectedDate] = useState('');
  const [newLat, setNewLat] = useState('');
  const [newLong, setNewLong] = useState('');
  
  // State/District dropdown data
  const [states, setStates] = useState<any[]>([]);
  const [districts, setDistricts] = useState<any[]>([]);
  const [selectedStateId, setSelectedStateId] = useState('');
  const [selectedDistrictId, setSelectedDistrictId] = useState('');
  const [masterDataLoading, setMasterDataLoading] = useState(false);
  
  const [outlets, setOutlets] = useState<any[]>([]);
  const [requests, setRequests] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    fetchData();
    fetchMasterData();
  }, []);

  // Filter districts based on selected state
  const filteredDistricts = selectedStateId 
    ? districts.filter(d => d.stateId === selectedStateId)
    : districts;

  const fetchData = async () => {
    try {
      setLoading(true);
      const dashboard = await dealerService.getDashboardData();
      const relocationRes = await dealerService.getRelocationRequests();
      
      setOutlets(dashboard.outlets || []);
      setRequests(relocationRes.requests || []);
    } catch (error) {
      console.error('Fetch relocation data error:', error);
      toast.error(getApiErrorMessage(error, 'Failed to load outlets and requests'));
    } finally {
      setLoading(false);
    }
  };

  const fetchMasterData = async () => {
    try {
      setMasterDataLoading(true);
      const [statesRes, districtsRes] = await Promise.all([
        masterService.getStates().catch(() => ({ success: false })) as Promise<any>,
        masterService.getDistricts({ limit: 'all' }).catch(() => ({ success: false })) as Promise<any>
      ]);

      const statesData = statesRes?.success ? (statesRes.data?.states || statesRes.data || []) : [];
      const districtsData = districtsRes?.success ? (districtsRes.data?.districts || districtsRes.data || []) : [];

      setStates(statesData);
      setDistricts(districtsData);
    } catch (error) {
      console.error('Fetch master data error:', error);
      toast.error(getApiErrorMessage(error, 'Failed to load master data'));
    } finally {
      setMasterDataLoading(false);
    }
  };

  const handleStateChange = (stateId: string) => {
    setSelectedStateId(stateId);
    setSelectedDistrictId(''); // Reset district when state changes
    const selectedState = states.find(s => s.id === stateId);
    if (selectedState) {
      setNewState(selectedState.name);
    }
  };

  const handleDistrictChange = (districtId: string) => {
    setSelectedDistrictId(districtId);
    const selectedDistrict = districts.find(d => d.id === districtId);
    if (selectedDistrict) {
      setNewCity(selectedDistrict.name);
    }
  };

  const handleSubmitRequest = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!selectedOutlet) {
      toast.error('Please select an outlet');
      return;
    }

    if (!newCity.trim() || !newState.trim() || !newAddress.trim()) {
      toast.error('Please provide complete relocation details');
      return;
    }

    if (!reason.trim()) {
      toast.error('Please provide a reason for relocation');
      return;
    }

    if (!distance.trim() || !propertyType || !expectedDate) {
      toast.error('Please fill all mandatory fields (Distance, Property Type, Date)');
      return;
    }

    try {
      setSubmitting(true);
      const payload = {
        outletId: selectedOutlet.id,
        relocationType: 'Intercity',
        currentAddress: selectedOutlet.address || '',
        currentCity: selectedOutlet.city || '',
        currentState: selectedOutlet.state || '',
        newAddress,
        newCity,
        newState,
        newDistrictId: selectedDistrictId || null,
        newStateId: selectedStateId || null,
        distance,
        reason,
        propertyType,
        proposedDate: expectedDate,
        proposedLatitude: newLat ? parseFloat(newLat) : null,
        proposedLongitude: newLong ? parseFloat(newLong) : null,
        currentLatitude: selectedOutlet.latitude || null,
        currentLongitude: selectedOutlet.longitude || null
      };

      await dealerService.submitRelocationRequest(payload);
      toast.success(`Relocation request submitted successfully for ${selectedOutlet.name}`);
      setIsDialogOpen(false);
      fetchData(); // Refresh list
      
      // Reset form
      setSelectedOutlet(null);
      setNewCity('');
      setNewState('');
      setNewAddress('');
      setReason('');
      setDistance('');
      setPropertyType('');
      setExpectedDate('');
      setNewLat('');
      setNewLong('');
      if (onViewDetails) {
        fetchData();
      }
    } catch (error) {
      console.error('Submit relocation error:', error);
      toast.error(getApiErrorMessage(error, 'Failed to submit relocation request'));
    } finally {
      setSubmitting(false);
    }
  };

  const stats = [
    {
      title: 'Total Requests',
      value: requests.length,
      icon: MapPin,
      color: 'bg-blue-500',
    },
    {
      title: 'Pending',
      value: requests.filter(r => r.status !== 'Completed' && r.status !== 'Rejected').length,
      icon: Calendar,
      color: 'bg-yellow-500',
    },
    {
      title: 'Approved',
      value: requests.filter(r => r.status === 'Completed').length,
      icon: Building2,
      color: 'bg-green-500',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Loading Overlay */}
      {loading && (
        <div className="min-h-[400px] flex items-center justify-center">
          <Loader2 className="w-8 h-8 text-amber-600 animate-spin" />
        </div>
      )}

      {!loading && (
        <>
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-slate-900 mb-2">Relocation Requests</h1>
              <p className="text-slate-600">
                Request to relocate your existing dealership or studio to a new location
              </p>
            </div>
            
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button className="bg-amber-600 hover:bg-amber-700 text-white">
                  <Plus className="w-4 h-4 mr-2" />
                  New Relocation Request
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                  <DialogTitle>Submit Relocation Request</DialogTitle>
                  <DialogDescription>
                    Provide details about the outlet you want to relocate and its proposed new location
                  </DialogDescription>
                </DialogHeader>
                
                <form onSubmit={handleSubmitRequest} className="space-y-4">
                  {/* Select Outlet */}
                  <div className="space-y-2">
                    <Label htmlFor="outlet">Select Outlet to Relocate *</Label>
                    <Select 
                      value={selectedOutlet?.id} 
                      onValueChange={(val) => setSelectedOutlet(outlets.find(o => o.id === val))}
                      required
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select an outlet" />
                      </SelectTrigger>
                      <SelectContent>
                        {outlets.map((outlet) => (
                          <SelectItem key={outlet.id} value={outlet.id}>
                            {outlet.name} ({outlet.code})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {selectedOutlet && (
                    <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-2">
                      <h3 className="text-slate-900 text-sm font-medium">Current Location</h3>
                      <p className="text-slate-600 text-sm">{selectedOutlet.location}</p>
                    </div>
                  )}

                   {/* New Location Details - State/District Dropdowns */}
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
                       <Label htmlFor="newState">Proposed State *</Label>
                       <Select 
                         value={selectedStateId} 
                         onValueChange={handleStateChange}
                         required
                         disabled={masterDataLoading}
                       >
                         <SelectTrigger id="newState">
                           <SelectValue placeholder={masterDataLoading ? "Loading..." : "Select state"} />
                         </SelectTrigger>
                         <SelectContent>
                           {states.map((state) => (
                             <SelectItem key={state.id} value={state.id}>
                               {state.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
                       </Select>
                     </div>
                     <div className="space-y-2">
                       <Label htmlFor="newCity">Proposed City/District *</Label>
                       <Select 
                         value={selectedDistrictId} 
                         onValueChange={handleDistrictChange}
                         required
                         disabled={!selectedStateId || masterDataLoading}
                       >
                         <SelectTrigger id="newCity">
                           <SelectValue placeholder={!selectedStateId ? "Select state first" : masterDataLoading ? "Loading..." : "Select district"} />
                         </SelectTrigger>
                         <SelectContent>
                           {filteredDistricts.map((district) => (
                             <SelectItem key={district.id} value={district.id}>
                               {district.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
                       </Select>
                     </div>
                   </div>

                  <div className="space-y-2">
                    <Label htmlFor="newAddress">Proposed Full Address *</Label>
                    <Textarea
                      id="newAddress"
                      placeholder="Enter detailed address of the proposed new location..."
                      value={newAddress}
                      onChange={(e) => setNewAddress(e.target.value)}
                      rows={3}
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="distance">Estimated Distance from Current Location (in km) *</Label>
                    <Input
                      id="distance"
                      placeholder="e.g. 5.5 km"
                      value={distance}
                      onChange={(e) => setDistance(e.target.value)}
                      required
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="propertyType">Property Type *</Label>
                      <Select value={propertyType} onValueChange={setPropertyType} required>
                        <SelectTrigger id="propertyType">
                          <SelectValue placeholder="Select type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Owned">Owned</SelectItem>
                          <SelectItem value="Leased">Leased</SelectItem>
                          <SelectItem value="Rented">Rented</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="expectedDate">Expected Relocation Date *</Label>
                      <Input
                        id="expectedDate"
                        type="date"
                        value={expectedDate}
                        onChange={(e) => setExpectedDate(e.target.value)}
                        required
                      />
                    </div>
                  </div>

                  {/* Reason */}
                  <div className="space-y-2">
                    <Label htmlFor="reason">Reason for Relocation *</Label>
                    <Textarea
                      id="reason"
                      placeholder="Why do you want to relocate this outlet?"
                      value={reason}
                      onChange={(e) => setReason(e.target.value)}
                      rows={4}
                      required
                    />
                  </div>

                  {/* Important Notes */}
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h4 className="text-blue-900 mb-2 font-medium">Policy Notes</h4>
                    <ul className="text-blue-800 text-xs space-y-1">
                      <li>• Relocation is subject to feasibility study of the new location</li>
                      <li>• Maximum allowed distance and other policy criteria apply</li>
                      <li>• Site visit will be conducted by RBM/ASM</li>
                      <li>• New outlet code might be generated upon approval</li>
                    </ul>
                  </div>

                  <DialogFooter>
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setIsDialogOpen(false)}
                    >
                      Cancel
                    </Button>
                    <Button 
                      type="submit"
                      className="bg-amber-600 hover:bg-amber-700 text-white"
                      disabled={submitting}
                    >
                      {submitting ? (
                        <>
                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          Submitting...
                        </>
                      ) : (
                        'Submit Relocation Request'
                      )}
                    </Button>
                  </DialogFooter>
                </form>
              </DialogContent>
            </Dialog>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {stats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <Card key={index}>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm">{stat.title}</CardTitle>
                    <div className={`${stat.color} p-2 rounded-lg`}>
                      <Icon className="h-4 w-4 text-white" />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-slate-900 text-2xl">{stat.value}</div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* Requests Table */}
          <Card>
            <CardHeader>
              <CardTitle>My Relocation Requests</CardTitle>
              <CardDescription>
                Track the status of your relocation applications
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Request ID</TableHead>
                    <TableHead>Outlet</TableHead>
                    <TableHead>Target Location</TableHead>
                    <TableHead>Submitted On</TableHead>
                    <TableHead>Current Status</TableHead>
                    <TableHead>Progress</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {requests.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-4 text-slate-500">
                        No relocation requests found
                      </TableCell>
                    </TableRow>
                  ) : (
                    requests.map((request) => (
                      <TableRow key={request.id}>
                        <TableCell>
                          <span className="text-slate-900 font-medium">{request.requestId}</span>
                        </TableCell>
                        <TableCell>
                          {request.outlet?.name}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1 text-sm">
                            <span className="text-slate-500">{request.currentCity}</span>
                            <ArrowRight className="w-3 h-3 text-slate-400" />
                            <span className="text-slate-900">{request.newCity}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-slate-600">
                           {formatDateTime(request.createdAt)}
                        </TableCell>
                        <TableCell>
                          <Badge className={`border ${getStatusColor(request.status)}`}>
                            {request.status}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <div className="flex-1 bg-slate-200 rounded-full h-2 min-w-[60px]">
                              <div
                                className="bg-amber-500 h-2 rounded-full"
                                style={{ width: `${request.progressPercentage || 0}%` }}
                              />
                            </div>
                            <span className="text-xs text-slate-600">{request.progressPercentage || 0}%</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Button 
                            variant="ghost" 
                            size="sm"
                            onClick={() => onViewDetails && onViewDetails(request.requestId)}
                          >
                            <Eye className="w-4 h-4 mr-1" />
                            View
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}