import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Users, Plus, Edit2, Trash2, MapPin } from 'lucide-react';
import { RootState } from '@/store';

interface DDLeadManagementProps {
  selectedZone: string;
  onAddLead: () => void;
  onEditLead: (lead: any) => void;
  onDeleteLead: (id: string, name: string) => void;
}

export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({ 
  selectedZone, onAddLead, onEditLead, onDeleteLead 
}) => {
  const { ddLeads, zones } = useSelector((state: RootState) => state.master);

  const filteredLeads = (ddLeads || []).filter((lead: any) => 
    selectedZone === 'all' || 
    (lead.assignedZoneIds && lead.assignedZoneIds.includes(selectedZone))
  );

  const getZoneName = (zoneId: string) => {
    return zones.find(z => z.id === zoneId)?.name || 'Unknown Zone';
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>DD-Leads (Dealer Development Lead)</CardTitle>
            <CardDescription>Manage DD-Leads and their zonal assignments</CardDescription>
          </div>
          <Button onClick={onAddLead} className="bg-re-red hover:bg-re-red-hover">
            <Plus className="w-4 h-4 mr-2" />
            Add DD-Lead
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Lead Code</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Assigned Zones</TableHead>
              <TableHead>Contact</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredLeads.length > 0 ? (
              filteredLeads.map((lead: any) => (
                <TableRow key={lead.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Users className="w-4 h-4 text-re-red" />
                      <span className="font-medium">{lead.leadCode || 'N/A'}</span>
                    </div>
                  </TableCell>
                  <TableCell>{lead.name}</TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      {lead.assignedZoneIds && lead.assignedZoneIds.length > 0 ? (
                        lead.assignedZoneIds.map((zoneId: string) => (
                          <Badge key={zoneId} variant="outline" className="flex items-center gap-1">
                            <MapPin className="w-3 h-3" />
                            {getZoneName(zoneId)}
                          </Badge>
                        ))
                      ) : (
                        <Badge variant="secondary">National / No Zone</Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="text-sm">
                      <p className="text-slate-900">{lead.email}</p>
                      <p className="text-slate-500">{lead.phone || 'N/A'}</p>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant={lead.status === 'active' ? 'default' : 'secondary'} className={lead.status === 'active' ? 'bg-emerald-100 text-emerald-700' : ''}>
                      {lead.status.charAt(0).toUpperCase() + lead.status.slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-2">
                      <Button variant="ghost" size="sm" onClick={() => onEditLead(lead)}>
                        <Edit2 className="w-4 h-4" />
                      </Button>
                      <Button variant="ghost" size="sm" onClick={() => onDeleteLead(lead.id, lead.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8 text-slate-500">
                  No DD-Leads found. Click the button above to add one.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};

