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 { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Loader2, Trash2, UserMinus, Calendar, Clock, Phone } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";
import { format } from "date-fns";

interface Assignment {
  id: string;
  user_id: string;
  user_name?: string;
  user_email?: string;
  extension_id: string;
  extension_number: string;
  extension_display_name?: string;
  agent_id?: string;
  agent_name?: string;
  status: "active" | "expired" | "revoked";
  assigned_at: string;
  expires_at?: string;
  total_calls?: number;
  total_minutes?: number;
  last_call_at?: string;
}

interface SIPAnalytics {
  totalAssignments: number;
  activeAssignments: number;
  totalCalls: number;
  totalMinutes: number;
}

export default function SIPAssignments() {
  const [revokeDialogOpen, setRevokeDialogOpen] = useState(false);
  const [selectedAssignment, setSelectedAssignment] = useState<Assignment | null>(null);
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const { data: assignments, isLoading } = useQuery<Assignment[]>({
    queryKey: ["/api/admin/sip/assignments"],
  });

  const { data: analytics } = useQuery<SIPAnalytics>({
    queryKey: ["/api/admin/sip/analytics"],
  });

  // Revoke assignment mutation
  const revokeMutation = useMutation({
    mutationFn: async (id: string) => {
      return apiRequest("DELETE", `/api/admin/sip/assignments/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/admin/sip/assignments"] });
      queryClient.invalidateQueries({ queryKey: ["/api/admin/sip/analytics"] });
      setRevokeDialogOpen(false);
      toast({ title: "Assignment revoked", description: "Extension unassigned from user" });
    },
    onError: (error: any) => {
      toast({ title: "Error", description: error.message, variant: "destructive" });
    },
  });

  const activeAssignments = assignments?.filter(a => a.status === "active") || [];
  const expiredAssignments = assignments?.filter(a => a.status === "expired") || [];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Extension Assignments</h2>
          <p className="text-muted-foreground">Manage user extension assignments and usage</p>
        </div>
      </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 Assignments</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{analytics?.totalAssignments || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Active</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{analytics?.activeAssignments || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Calls</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{analytics?.totalCalls || 0}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Minutes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{analytics?.totalMinutes || 0}</div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="active">
        <TabsList>
          <TabsTrigger value="active">Active ({activeAssignments.length})</TabsTrigger>
          <TabsTrigger value="expired">Expired ({expiredAssignments.length})</TabsTrigger>
        </TabsList>

        <TabsContent value="active">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Extension</TableHead>
                    <TableHead>AI Agent</TableHead>
                    <TableHead>Assigned</TableHead>
                    <TableHead>Expires</TableHead>
                    <TableHead>Usage</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>
                  ) : !activeAssignments.length ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                        No active assignments found.
                      </TableCell>
                    </TableRow>
                  ) : (
                    activeAssignments.map((assignment) => (
                      <TableRow key={assignment.id}>
                        <TableCell>
                          <div>
                            <div className="font-medium">{assignment.user_name || "Unknown"}</div>
                            <div className="text-sm text-muted-foreground">{assignment.user_email}</div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <Phone className="h-4 w-4 text-muted-foreground" />
                            {assignment.extension_number}
                            {assignment.extension_display_name && (
                              <span className="text-muted-foreground">({assignment.extension_display_name})</span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          {assignment.agent_name ? <Badge variant="secondary">{assignment.agent_name}</Badge> : <span className="text-muted-foreground">-</span>}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2 text-sm">
                            <Calendar className="h-3 w-3 text-muted-foreground" />
                            {format(new Date(assignment.assigned_at), "MMM d, yyyy")}
                          </div>
                        </TableCell>
                        <TableCell>
                          {assignment.expires_at ? (
                            <div className="flex items-center gap-2 text-sm">
                              <Clock className="h-3 w-3 text-muted-foreground" />
                              {format(new Date(assignment.expires_at), "MMM d, yyyy")}
                            </div>
                          ) : (
                            <span className="text-muted-foreground">Never</span>
                          )}
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            <div>{assignment.total_calls || 0} calls</div>
                            <div className="text-muted-foreground">{assignment.total_minutes || 0} min</div>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => { setSelectedAssignment(assignment); setRevokeDialogOpen(true); }}
                          >
                            <UserMinus className="h-4 w-4 text-destructive" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="expired">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Extension</TableHead>
                    <TableHead>Assigned</TableHead>
                    <TableHead>Expired</TableHead>
                    <TableHead>Usage</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {!expiredAssignments.length ? (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                        No expired assignments found.
                      </TableCell>
                    </TableRow>
                  ) : (
                    expiredAssignments.map((assignment) => (
                      <TableRow key={assignment.id}>
                        <TableCell>
                          <div>
                            <div className="font-medium">{assignment.user_name || "Unknown"}</div>
                            <div className="text-sm text-muted-foreground">{assignment.user_email}</div>
                          </div>
                        </TableCell>
                        <TableCell>{assignment.extension_number}</TableCell>
                        <TableCell>{format(new Date(assignment.assigned_at), "MMM d, yyyy")}</TableCell>
                        <TableCell>
                          {assignment.expires_at ? format(new Date(assignment.expires_at), "MMM d, yyyy") : "-"}
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            {assignment.total_calls || 0} calls / {assignment.total_minutes || 0} min
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Revoke Dialog */}
      <Dialog open={revokeDialogOpen} onOpenChange={setRevokeDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Revoke Assignment</DialogTitle>
            <DialogDescription>
              Are you sure you want to revoke extension {selectedAssignment?.extension_number} from {selectedAssignment?.user_name}?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRevokeDialogOpen(false)}>Cancel</Button>
            <Button
              variant="destructive"
              onClick={() => selectedAssignment && revokeMutation.mutate(selectedAssignment.id)}
              disabled={revokeMutation.isPending}
            >
              {revokeMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Revoke
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}