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

interface RegionalManagementProps {
  selectedZone: string;
  onAddRegion: () => void;
  onEditRegion: (region: any) => void;
  onDeleteRegion: (id: string, name: string) => void;
}

export const RegionalManagement: React.FC<RegionalManagementProps> = ({ 
  selectedZone, onAddRegion, onEditRegion, onDeleteRegion 
}) => {
  const { regionalOffices } = useSelector((state: RootState) => state.master);

  const filteredRegions = regionalOffices.filter((r: any) => selectedZone === 'all' || r.zoneId === selectedZone);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Regional Offices</CardTitle>
            <CardDescription>Manage regional offices within zones</CardDescription>
          </div>
          <Button onClick={onAddRegion} className="bg-re-red hover:bg-re-red-hover">
            <Plus className="w-4 h-4 mr-2" />
            Add Regional Office
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Region Code</TableHead>
              <TableHead>Region Name</TableHead>
              <TableHead>Zone</TableHead>
              <TableHead>Regional Manager</TableHead>
              <TableHead>Districts</TableHead>
              <TableHead>Cities</TableHead>
              <TableHead>Regional Officers</TableHead>
              <TableHead>ASMs</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredRegions.map((region: any) => (
              <TableRow key={region.id}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Building2 className="w-4 h-4 text-indigo-600" />
                    <span className="font-medium">{region.code}</span>
                  </div>
                </TableCell>
                <TableCell className="font-medium">{region.name}</TableCell>
                <TableCell>{region.zoneName}</TableCell>
                <TableCell>
                  {region.regionalManager ? (
                    <div className="flex flex-col">
                      <span className="text-sm">{region.regionalManager.name}</span>
                      <span className="text-xs text-slate-500">{region.regionalManager.email}</span>
                    </div>
                  ) : (
                    <span className="text-slate-400 italic">Not Assigned</span>
                  )}
                </TableCell>
                <TableCell>
                   <div className="flex flex-wrap gap-1">
                    {(region.districts || []).slice(0, 2).map((district: any, idx: number) => (
                      <Badge key={idx} variant="secondary" className="text-xs">
                        {district.name || district}
                      </Badge>
                    ))}
                    {(region.districts || []).length > 2 && (
                      <Badge variant="secondary" className="text-xs">
                        +{(region.districts || []).length - 2}
                      </Badge>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {region.cities.slice(0, 3).map((city: string, idx: number) => (
                      <span key={idx} className="text-xs text-slate-600">
                        {city}{idx < Math.min(region.cities.length, 3) - 1 ? ',' : ''}
                      </span>
                    ))}
                    {region.cities.length > 3 && (
                      <span className="text-xs text-slate-500">+{region.cities.length - 3}</span>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  <Badge className="bg-purple-600">{region.regionalOfficerCount}</Badge>
                </TableCell>
                <TableCell>
                  <Badge className="bg-green-600">{region.asmCount}</Badge>
                </TableCell>
                <TableCell>
                  <Badge variant={region.status === 'Active' ? 'default' : 'secondary'} className={region.status === 'Active' ? 'bg-emerald-100 text-emerald-700' : ''}>
                    {region.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button variant="ghost" size="sm" onClick={() => onEditRegion(region)}>
                      <Edit2 className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => onDeleteRegion(region.id, region.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};

