import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Loader2, Phone, UserPlus, RefreshCw, Search, Filter, Check } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";

interface SIPExtension {
  id: string;
  extension: string;
  display_name?: string;
  freepbx_connection_id: string;
  connection_name?: string;
  status: "available" | "assigned" | "disabled" | "offline";
  registration_status: "registered" | "unregistered" | "unknown";
  current_calls?: number;
  max_concurrent_calls?: number;
  last_registered_at?: string;
}

interface User {
  id: string;
  email: string;
  name?: string;
}

interface Agent {
  id: string;
  name: string;
}

export default function SIPExtensions() {
  const [assignDialogOpen, setAssignDialogOpen] = useState(false);
  const [selectedExtension, setSelectedExtension] = useState<SIPExtension | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [selectedUserId, setSelectedUserId] = useState("");
  const [selectedAgentId, setSelectedAgentId] = useState("");
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const { data: extensions, isLoading } = useQuery<{ data: SIPExtension[]; total: number }>({
    queryKey: ["/api/admin/sip/extensions", { search: searchQuery, status: statusFilter === "all" ? undefined : statusFilter }],
  });

  const { data: users } = useQuery<User[]>({
    queryKey: ["/api/admin/users"],
    enabled: assignDialogOpen,
  });

  const { data: agents } = useQuery<Agent[]>({
    queryKey: ["/api/admin/agents"],
    enabled: assignDialogOpen,
  });

  // Assign mutation
  const assignMutation = useMutation({
    mutationFn: async (data: any) => {
      return apiRequest("POST", "/api/admin/sip/assignments", data);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/admin/sip/extensions"] });
      setAssignDialogOpen(false);
      setSelectedExtension(null);
      setSelectedUserId("");
      setSelectedAgentId("");
      toast({ title: "Extension assigned", description: "Extension assigned to user successfully" });
    },
    onError: (error: any) => {
      toast({ title: "Error", description: error.message, variant: "destructive" });
    },
  });

  const getStatusColor = (status: string) => {
    switch (status) {
      case "available": return "bg-green-500";
      case "assigned": return "bg-blue-500";
      case "disabled": return "bg-gray-400";
      case "offline": return "bg-red-500";
      default: return "bg-gray-400";
    }
  };

  const getRegistrationColor = (status: string) => {
    switch (status) {
      case "registered": return "text-green-600 bg-green-50";
      case "unregistered": return "text-red-600 bg-red-50";
      default: return "text-gray-600 bg-gray-50";
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">SIP Extensions</h2>
          <p className="text-muted-foreground">Manage and assign SIP extensions to users</p>
        </div>
        <Button variant="outline" onClick={() => queryClient.invalidateQueries({ queryKey: ["/api/admin/sip/extensions"] })}>
          <RefreshCw className="mr-2 h-4 w-4" /> Refresh
        </Button>
      </div>

      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Extensions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{extensions?.total || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Available</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{extensions?.data?.filter(e => e.status === "available").length || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Assigned</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{extensions?.data?.filter(e => e.status === "assigned").length || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Registered</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{extensions?.data?.filter(e => e.registration_status === "registered").length || 0}</div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search by extension or name..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="available">Available</SelectItem>
                <SelectItem value="assigned">Assigned</SelectItem>
                <SelectItem value="disabled">Disabled</SelectItem>
                <SelectItem value="offline">Offline</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Extension</TableHead>
                <TableHead>Display Name</TableHead>
                <TableHead>Connection</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Registration</TableHead>
                <TableHead>Active Calls</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-8">
                    <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                  </TableCell>
                </TableRow>
              ) : !extensions?.data?.length ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                    No extensions found. Sync from a FreePBX connection first.
                  </TableCell>
                </TableRow>
              ) : (
                extensions.data.map((ext) => (
                  <TableRow key={ext.id}>
                    <TableCell className="font-medium">
                      <div className="flex items-center gap-2">
                        <Phone className="h-4 w-4 text-muted-foreground" />
                        {ext.extension}
                      </div>
                    </TableCell>
                    <TableCell>{ext.display_name || "-"}</TableCell>
                    <TableCell className="text-muted-foreground text-sm">{ext.connection_name || "-"}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <div className={`h-2 w-2 rounded-full ${getStatusColor(ext.status)}`} />
                        <span className="capitalize">{ext.status}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline" className={getRegistrationColor(ext.registration_status)}>
                        {ext.registration_status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      {ext.current_calls || 0} / {ext.max_concurrent_calls || 1}
                    </TableCell>
                    <TableCell className="text-right">
                      {ext.status === "available" && (
                        <Button
                          size="sm"
                          onClick={() => { setSelectedExtension(ext); setAssignDialogOpen(true); }}
                        >
                          <UserPlus className="mr-2 h-4 w-4" /> Assign
                        </Button>
                      )}
                      {ext.status === "assigned" && (
                        <Badge variant="secondary">Assigned</Badge>
                      )}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Assign Dialog */}
      <Dialog open={assignDialogOpen} onOpenChange={setAssignDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Assign Extension</DialogTitle>
            <DialogDescription>
              Assign extension {selectedExtension?.extension} to a user
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>User *</Label>
              <Select value={selectedUserId} onValueChange={setSelectedUserId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select user" />
                </SelectTrigger>
                <SelectContent>
                  {users?.map((user) => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.email} {user.name && `(${user.name})`}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>AI Agent (Optional)</Label>
              <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select agent" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="">None</SelectItem>
                  {agents?.map((agent) => (
                    <SelectItem key={agent.id} value={agent.id}>
                      {agent.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAssignDialogOpen(false)}>Cancel</Button>
            <Button
              onClick={() => assignMutation.mutate({
                userId: selectedUserId,
                extensionId: selectedExtension?.id,
                agentId: selectedAgentId || undefined,
              })}
              disabled={assignMutation.isPending || !selectedUserId}
            >
              {assignMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Assign
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}