"use client";

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AudioPlayerProvider,
  AudioPlayerButton,
  AudioPlayerProgress,
  AudioPlayerTime,
  AudioPlayerDuration,
} from "@/components/ui/audio-player";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { CalendarDays, Clock, Phone, User } from "lucide-react";

interface AudioPlayerModalProps {
  isOpen: boolean;
  onClose: () => void;
  recordingUrl: string;
  callData?: {
    calldate?: string;
    src?: string;
    dst?: string;
    duration?: number;
    disposition?: string;
  };
}

export function AudioPlayerModal({
  isOpen,
  onClose,
  recordingUrl,
  callData,
}: AudioPlayerModalProps) {
  const audioItem = {
    id: recordingUrl,
    src: recordingUrl,
    data: callData,
  };

  const formatDuration = (seconds?: number) => {
    if (!seconds) return "--:--";
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

  const formatDate = (dateString?: string) => {
    if (!dateString) return "Fecha no disponible";
    try {
      return new Date(dateString).toLocaleString("es-ES", {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return dateString;
    }
  };

  const getDispositionColor = (disposition?: string) => {
    switch (disposition?.toLowerCase()) {
      case "answered":
        return "bg-green-100 text-green-800 border-green-200";
      case "busy":
        return "bg-yellow-100 text-yellow-800 border-yellow-200";
      case "no answer":
        return "bg-red-100 text-red-800 border-red-200";
      default:
        return "bg-gray-100 text-gray-800 border-gray-200";
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Phone className="h-5 w-5" />
            Reproductor de Grabación
          </DialogTitle>
          <DialogDescription>
            Reproductor de audio para la grabación de la llamada
          </DialogDescription>
        </DialogHeader>

        <AudioPlayerProvider>
          <div className="space-y-6">
            {/* Información de la llamada */}
            {callData && (
              <Card>
                <CardContent className="pt-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center gap-2">
                      <CalendarDays className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <p className="text-sm font-medium">Fecha y Hora</p>
                        <p className="text-sm text-muted-foreground">
                          {formatDate(callData.calldate)}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      <Clock className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <p className="text-sm font-medium">Duración</p>
                        <p className="text-sm text-muted-foreground">
                          {formatDuration(callData.duration)}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      <User className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <p className="text-sm font-medium">Origen</p>
                        <p className="text-sm text-muted-foreground">
                          {callData.src ?? "No disponible"}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      <Phone className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <p className="text-sm font-medium">Destino</p>
                        <p className="text-sm text-muted-foreground">
                          {callData.dst ?? "No disponible"}
                        </p>
                      </div>
                    </div>
                  </div>

                  {callData.disposition && (
                    <div className="mt-4 flex items-center gap-2">
                      <span className="text-sm font-medium">Estado:</span>
                      <Badge
                        variant="outline"
                        className={getDispositionColor(callData.disposition)}
                      >
                        {callData.disposition}
                      </Badge>
                    </div>
                  )}
                </CardContent>
              </Card>
            )}

            {/* Reproductor de audio */}
            <Card>
              <CardContent className="pt-6">
                <div className="space-y-4">
                  <div className="flex items-center justify-center">
                    <AudioPlayerButton
                      item={audioItem}
                      className="h-16 w-16"
                      size="lg"
                    />
                  </div>

                  <div className="space-y-2">
                    <AudioPlayerProgress className="w-full" />
                    <div className="flex justify-between items-center text-sm text-muted-foreground">
                      <AudioPlayerTime />
                      <AudioPlayerDuration />
                    </div>
                  </div>

                  <div className="text-center">
                    <p className="text-sm text-muted-foreground">
                      Haz clic en el botón de reproducción para escuchar la grabación
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </AudioPlayerProvider>
      </DialogContent>
    </Dialog>
  );
}