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 { Textarea } from "@/components/ui/textarea";
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, Send, RefreshCw, Search, Bot, Sparkles } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";

interface SIPExtension {
  id: string;
  extension: string;
  display_name?: string;
  description?: string;
  status: "available" | "assigned";
  max_concurrent_calls?: number;
  allow_outbound?: boolean;
  allow_inbound?: boolean;
  record_calls?: boolean;
}

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

interface UserAssignment {
  id: string;
  extension_id: string;
  extension_number: string;
  extension_display_name?: string;
  agent_id?: string;
  agent_name?: string;
  status: string;
  assigned_at: string;
  total_calls?: number;
  total_minutes?: number;
  expires_at?: string;
}

export default function SIPExtensions() {
  const [requestDialogOpen, setRequestDialogOpen] = useState(false);
  const [selectedExtension, setSelectedExtension] = useState<SIPExtension | null>(null);
  const [selectedAgentId, setSelectedAgentId] = useState("");
  const [requestReason, setRequestReason] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const { data: availableExtensions, isLoading: loadingAvailable } = useQuery<SIPExtension[]>({
    queryKey: ["/api/sip/extensions/available", { search: searchQuery }],
  });

  const { data: myAssignments, isLoading: loadingAssignments } = useQuery<UserAssignment[]>({
    queryKey: ["/api/sip/my-extensions"],
  });

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

  // Request extension mutation
  const requestMutation = useMutation({
    mutationFn: async (data: any) => {
      return apiRequest("POST", "/api/sip/requests", data);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/sip/extensions/available"] });
      setRequestDialogOpen(false);
      setSelectedExtension(null);
      setSelectedAgentId("");
      setRequestReason("");
      toast({ title: "Request submitted", description: "Your extension request has been submitted for approval" });
    },
    onError: (error: any) => {
      toast({ title: "Error", description: error.message, variant: "destructive" });
    },
  });

  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">Browse and request SIP extensions for AI voice calls</p>
        </div>
      </div>

      {/* My Extensions Section */}
      <div>
        <h3 className="text-lg font-semibold mb-4">My Extensions</h3>
        {loadingAssignments ? (
          <Card>
            <CardContent className="flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin" />
            </CardContent>
          </Card>
        ) : !myAssignments?.length ? (
          <Card>
            <CardContent className="flex flex-col items-center justify-center py-12 text-center">
              <Phone className="h-12 w-12 text-muted-foreground mb-4" />
              <h4 className="font-medium mb-2">No extensions assigned</h4>
              <p className="text-sm text-muted-foreground mb-4">Request an extension below to start making AI voice calls</p>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {myAssignments.map((assignment) => (
              <Card key={assignment.id}>
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        <Phone className="h-5 w-5 text-primary" />
                        {assignment.extension_number}
                      </CardTitle>
                      <CardDescription>{assignment.extension_display_name || "SIP Extension"}</CardDescription>
                    </div>
                    <Badge variant="outline" className="bg-green-50 text-green-600">Active</Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {assignment.agent_name && (
                    <div className="flex items-center gap-2 text-sm">
                      <Bot className="h-4 w-4 text-muted-foreground" />
                      <span>AI Agent: <strong>{assignment.agent_name}</strong></span>
                    </div>
                  )}
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Usage:</span>
                    <span>{assignment.total_calls || 0} calls / {assignment.total_minutes || 0} min</span>
                  </div>
                  {assignment.expires_at && (
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">Expires:</span>
                      <span>{new Date(assignment.expires_at).toLocaleDateString()}</span>
                    </div>
                  )}
                  <Button className="w-full" asChild>
                    <a href={`/app/calls?extension=${assignment.extension_number}`}>
                      <Send className="mr-2 h-4 w-4" /> Make Call
                    </a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>

      {/* Browse Available Extensions */}
      <div>
        <h3 className="text-lg font-semibold mb-4">Available Extensions</h3>
        <Card>
          <CardContent className="p-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search extensions..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Extension</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Features</TableHead>
                  <TableHead className="text-right">Action</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loadingAvailable ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-8">
                      <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                    </TableCell>
                  </TableRow>
                ) : !availableExtensions?.length ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                      No available extensions found.
                    </TableCell>
                  </TableRow>
                ) : (
                  availableExtensions.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 || "-"}
                        {ext.description && (
                          <div className="text-sm text-muted-foreground">{ext.description}</div>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {ext.allow_inbound && <Badge variant="outline" className="text-xs">Inbound</Badge>}
                          {ext.allow_outbound && <Badge variant="outline" className="text-xs">Outbound</Badge>}
                          {ext.record_calls && <Badge variant="outline" className="text-xs">Recording</Badge>}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <Button
                          size="sm"
                          onClick={() => { setSelectedExtension(ext); setRequestDialogOpen(true); }}
                        >
                          Request
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>

      {/* Request Dialog */}
      <Dialog open={requestDialogOpen} onOpenChange={setRequestDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Request Extension</DialogTitle>
            <DialogDescription>
              Request extension {selectedExtension?.extension} for AI voice calls
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>AI Agent</Label>
              <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select AI agent" />
                </SelectTrigger>
                <SelectContent>
                  {agents?.map((agent) => (
                    <SelectItem key={agent.id} value={agent.id}>
                      <div className="flex items-center gap-2">
                        <Sparkles className="h-4 w-4 text-primary" />
                        {agent.name}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>Reason (Optional)</Label>
              <Textarea
                placeholder="Tell us why you need this extension..."
                value={requestReason}
                onChange={(e) => setRequestReason(e.target.value)}
                rows={3}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRequestDialogOpen(false)}>Cancel</Button>
            <Button
              onClick={() => selectedExtension && requestMutation.mutate({
                sipExtensionId: selectedExtension.id,
                agentId: selectedAgentId || undefined,
                requestReason: requestReason,
              })}
              disabled={requestMutation.isPending}
            >
              {requestMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Submit Request
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}