
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Phone, Calendar, Play, Volume2, MoreHorizontal } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";

interface Call {
  customer: string;
  outcome: string;
  outcomeColor: string;
  time: string;
  duration?: string;
  intent?: string;
  cost?: string;
}

interface CallDetailsModalProps {
  isOpen: boolean;
  onClose: () => void;
  call: Call;
}

interface VAPIMessage {
  role: string;
  message?: string;
  content?: string;
  time: number;
  endTime?: number;
  secondsFromStart: number;
  duration?: number;
}

export function CallDetailsModal({ isOpen, onClose, call }: CallDetailsModalProps) {
  const { t } = useTranslation();
  const [isPlaying, setIsPlaying] = useState(false);

  if (!call) return null;

  const handlePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl bg-slate-800 border-slate-700 text-white">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-white">{t('callDetails.title')}</DialogTitle>
        </DialogHeader>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
          {/* Left Column - Contact Information */}
          <div className="space-y-6">
            <div className="bg-slate-700/50 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-4">
                <Phone className="w-5 h-5 text-slate-400" />
                <h3 className="text-lg font-semibold">{t('callDetails.contactInformation')}</h3>
              </div>
              
              <div className="space-y-4">
                <div>
                  <div className="text-sm text-slate-400 mb-1">{t('callDetails.customer')}</div>
                  <div className="flex items-center gap-2">
                    <span className="text-white font-medium">{call.customer}</span>
                    <span className={`px-2 py-1 rounded text-xs font-medium ${call.outcomeColor} bg-slate-600`}>
                      {call.outcome}
                    </span>
                  </div>
                </div>
                
                <div className="flex items-center gap-2 text-slate-300">
                  <Phone className="w-4 h-4" />
                  <span>{call.customer}</span>
                </div>
                
                <div className="flex items-center gap-2 text-slate-300">
                  <Calendar className="w-4 h-4" />
                  <span>{t('callDetails.addedAt')} {call.time}</span>
                </div>
              </div>
            </div>

            {/* Call Statistics */}
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-slate-700/50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-white">1</div>
                <div className="text-sm text-slate-400">{t('callDetails.totalCalls')}</div>
              </div>

              <div className="bg-slate-700/50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-white">{call.intent}</div>
                <div className="text-sm text-slate-400">{t('callDetails.intent')}</div>
              </div>

              <div className="bg-slate-700/50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-white">{call.duration}</div>
                <div className="text-sm text-slate-400">{t('callDetails.totalDuration')}</div>
              </div>

              <div className="bg-slate-700/50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-white">{call.cost}</div>
                <div className="text-sm text-slate-400">{t('callDetails.totalCost')}</div>
              </div>
            </div>

            <div className="bg-slate-700/50 rounded-lg p-4 text-center">
              <div className="text-2xl font-bold text-white">{call.outcome}</div>
              <div className="text-sm text-slate-400">{t('callDetails.callOutcome')}</div>
            </div>
          </div>

          {/* Right Column - Call History */}
          <div className="space-y-6">
            <div className="bg-slate-700/50 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-4">
                <Calendar className="w-5 h-5 text-slate-400" />
                <h3 className="text-lg font-semibold">{t('callDetails.callHistory')}</h3>
              </div>
              
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Calendar className="w-4 h-4 text-slate-400" />
                    <span className="text-slate-300">{call.time}</span>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className={`text-sm font-medium ${call.outcomeColor}`}>
                      {call.outcome}
                    </span>
                    <div className="text-right">
                      <div className="text-sm text-slate-400">{t('callDetails.duration')}: {call.duration}</div>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 className="text-white font-medium mb-2">{t('callDetails.transcript')}</h4>
                  <div className="text-slate-300 text-sm leading-relaxed max-h-64 overflow-y-auto">
                    {call.fullData?.messages && call.fullData.messages.length > 0 ? (
                      <div className="space-y-3">
                        {call.fullData.messages
                          .filter((msg: VAPIMessage) => msg.role === 'user' || msg.role === 'bot' || msg.role === 'assistant')
                          .map((msg: VAPIMessage, idx: number) => (
                            <div key={idx} className={`p-2 rounded ${msg.role === 'user' ? 'bg-slate-600/30' : 'bg-slate-700/30'}`}>
                              <div className="text-xs text-slate-400 mb-1">
                                {msg.role === 'user' ? t('callDetails.customer') : t('callDetails.assistant')} • {Math.floor(msg.secondsFromStart)}s
                              </div>
                              <div className="text-sm">{msg.message || msg.content || ''}</div>
                            </div>
                          ))}
                      </div>
                    ) : call.fullData?.transcript ? (
                      <div className="whitespace-pre-wrap">{call.fullData.transcript}</div>
                    ) : (
                      <div className="text-slate-400 italic">{t('callDetails.noTranscript')}</div>
                    )}
                  </div>
                </div>

                <div>
                  <h4 className="text-white font-medium mb-2">{t('callDetails.summary')}</h4>
                  <div className="bg-slate-600/50 rounded-lg p-3">
                    <p className="text-slate-300 text-sm">
                      {call.fullData?.analysis?.summary || call.intent || t('callDetails.noSummary')}
                    </p>
                    {call.fullData?.analysis?.successEvaluation && (
                      <div className="mt-2 text-xs">
                        <span className="text-slate-400">Success: </span>
                        <span className={call.fullData.analysis.successEvaluation === 'true' ? 'text-green-500' : 'text-red-500'}>
                          {call.fullData.analysis.successEvaluation === 'true' ? '✓ Yes' : '✗ No'}
                        </span>
                      </div>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <span className="text-slate-400 text-sm">Call Outcome:</span>
                    <span className={`ml-2 font-medium ${call.outcomeColor}`}>{call.outcome}</span>
                  </div>
                  <div>
                    <span className="text-slate-400 text-sm">AI Assistant:</span>
                    <span className="ml-2 text-white font-medium">AI Assistant</span>
                  </div>
                </div>

                {(call.fullData?.recording_url || call.fullData?.stereo_recording_url) && (
                  <div>
                    <h4 className="text-white font-medium mb-3">{t('callDetails.callRecording')}</h4>
                    <div className="bg-slate-600/50 rounded-lg p-4">
                      {call.fullData.recording_url && (
                        <div className="mb-2">
                          <a
                            href={call.fullData.recording_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-cyan-400 hover:text-cyan-300 text-sm flex items-center gap-2"
                          >
                            <Play className="w-4 h-4" />
                            {t('callDetails.playMono')}
                          </a>
                        </div>
                      )}
                      {call.fullData.stereo_recording_url && (
                        <div className="mb-2">
                          <a
                            href={call.fullData.stereo_recording_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-cyan-400 hover:text-cyan-300 text-sm flex items-center gap-2"
                          >
                            <Play className="w-4 h-4" />
                            {t('callDetails.playStereo')}
                          </a>
                        </div>
                      )}
                      {call.fullData.log_url && (
                        <div className="mt-3 pt-3 border-t border-slate-700">
                          <a
                            href={call.fullData.log_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-slate-400 hover:text-slate-300 text-xs flex items-center gap-2"
                          >
                            View Call Logs
                          </a>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
