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 } from 'lucide-react';
import { RootState } from '@/store';

interface ZMManagementProps {
  selectedZone: string;
  onAddZM: () => void;
  onEditZM: (zm: any) => void;
  onDeleteZM: (id: string, name: string) => void;
}

export const ZMManagement: React.FC<ZMManagementProps> = ({
  selectedZone, onAddZM, onEditZM, onDeleteZM
}) => {
  const { zonalManagers } = useSelector((state: RootState) => state.master);

  const filteredZMs = (zonalManagers || []).filter((zm: any) =>
    selectedZone === 'all' ||
    zm.zoneId === selectedZone ||
    (zm.zones && zm.zones.includes(selectedZone))
  );

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Zonal Managers (DD-ZM)</CardTitle>
            <CardDescription>Manage Zonal Managers and their region assignments</CardDescription>
          </div>
          <Button onClick={onAddZM} className="bg-amber-600 hover:bg-amber-700">
            <Plus className="w-4 h-4 mr-2" />
            Add ZM
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ZM Code</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Zone</TableHead>
              <TableHead>Regions Managed</TableHead>
              <TableHead>Contact</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredZMs.map((zm: any) => (
              <TableRow key={zm.id}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-blue-600" />
                    <span className="font-medium">{zm.zmCode || zm.code}</span>
                  </div>
                </TableCell>
                <TableCell>{zm.name}</TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {(zm.zones || [zm.zoneName]).map((z: string, i: number) => (
                      <Badge key={i} variant="outline">{z}</Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {(zm.regionNames || []).slice(0, 3).map((regionName: string, idx: number) => (
                      <Badge key={idx} variant="secondary" className="text-xs">
                        {regionName}
                      </Badge>
                    ))}
                    {(zm.regionNames || []).length > 3 && (
                      <Badge variant="secondary" className="text-xs">
                        +{(zm.regionNames || []).length - 3}
                      </Badge>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  <div className="text-sm">
                    <p className="text-slate-900">{zm.email}</p>
                    <p className="text-slate-500">{zm.phone}</p>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge variant={zm.status === 'Active' ? 'default' : 'secondary'} className={zm.status === 'Active' ? 'bg-emerald-100 text-emerald-700' : ''}>
                    {zm.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex items-center justify-end gap-2">
                    <Button variant="ghost" size="sm" onClick={() => onEditZM(zm)}>
                      <Edit2 className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};