'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { toast } from 'react-toastify';
import { api } from '@/lib/api';
import type { TranscriptData } from './types';

function fmtDuration(seconds: number | null) {
  if (!seconds) return '—';
  const m = Math.floor(seconds / 60);
  const s = seconds % 60;
  return `${m}m ${String(s).padStart(2, '0')}s`;
}

export default function TranscriptModal({ callId, onClose }: { callId: number; onClose: () => void }) {
  const [data, setData] = useState<TranscriptData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (api.get(`/ai-calls/${callId}/transcript/`) as Promise<{ data: TranscriptData }>)
      .then((res) => setData(res.data))
      .catch((e) => {
        toast.error(e instanceof Error ? e.message : 'Failed to load transcript');
        onClose();
      })
      .finally(() => setLoading(false));
  }, [callId, onClose]);

  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center bg-slate-950/60 backdrop-blur-sm p-4 overflow-y-auto" onClick={onClose}>
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
        onClick={(e) => e.stopPropagation()}
        className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-2xl w-full max-w-2xl my-8"
      >
        <div className="flex items-center justify-between gap-3 px-5 py-4 bg-[#405189]">
          <div className="min-w-0">
            <p className="text-[10px] font-extrabold uppercase tracking-widest text-indigo-200">AI Call Transcript</p>
            <h2 className="text-base font-bold text-white truncate">
              {data ? `${data.candidate} · ${data.job_title}` : 'Loading...'}
            </h2>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition cursor-pointer shrink-0"
          >
            <i className="fa-solid fa-xmark" />
          </button>
        </div>

        <div className="p-5 max-h-[70vh] overflow-y-auto custom-scrollbar">
          {loading || !data ? (
            <div className="space-y-3">
              {[...Array(6)].map((_, i) => (
                <div key={i} className="h-10 bg-slate-100 dark:bg-slate-800 rounded-none animate-pulse" />
              ))}
            </div>
          ) : (
            <>
              {/* Call meta */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4 text-xs">
                {[
                  ['Duration', fmtDuration(data.duration)],
                  ['Started', data.started_at || '—'],
                  ['Score', data.score !== null ? `${data.score}%` : '—'],
                  ['Attempts', String(data.attempts)],
                ].map(([k, v]) => (
                  <div key={k} className="border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2">
                    <p className="text-[9px] font-extrabold uppercase tracking-wide text-slate-400">{k}</p>
                    <p className="font-bold text-slate-800 dark:text-white">{v}</p>
                  </div>
                ))}
              </div>

              {/* Prominent Call Audio Recording Section — Positioned directly above AI Summary */}
              <div className="border border-indigo-100 dark:border-indigo-900/40 bg-indigo-50/50 dark:bg-indigo-950/20 p-3.5 mb-4 flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-full bg-[#405189] text-white flex items-center justify-center shrink-0 text-base shadow-sm">
                    <i className="fa-solid fa-circle-play"></i>
                  </div>
                  <div>
                    <p className="text-[10px] uppercase tracking-wider font-extrabold text-[#405189] dark:text-indigo-300">Call Audio Recording</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">
                      {data.recording_url
                        ? 'Full audio recording available for playback'
                        : 'Audio recording stream is currently processing or unavailable'}
                    </p>
                  </div>
                </div>

                {data.recording_url ? (
                  <a
                    href={data.recording_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 bg-[#0ab39c] hover:bg-[#099885] text-white text-xs font-bold px-4 py-2 shadow-sm transition cursor-pointer"
                  >
                    <i className="fa-solid fa-play text-xs"></i> Play Audio Recording
                  </a>
                ) : (
                  <span className="inline-flex items-center gap-1.5 text-xs text-slate-400 font-medium bg-slate-100 dark:bg-slate-800 px-3 py-1.5 border border-slate-200 dark:border-slate-700">
                    <i className="fa-solid fa-microphone-slash text-slate-400 text-xs"></i> Recording Unavailable
                  </span>
                )}
              </div>

              {data.summary && (
                <div className="border-l-2 border-indigo-400 dark:border-indigo-700 bg-indigo-50/50 dark:bg-indigo-950/20 px-3 py-2.5 mb-4">
                  <p className="text-[9px] font-extrabold uppercase tracking-wide text-indigo-500 mb-1">AI Summary</p>
                  <p className="text-xs font-medium text-slate-700 dark:text-slate-300">{data.summary}</p>
                </div>
              )}

              {/* Transcript as a chat */}
              {data.transcript ? (
                <div className="space-y-2.5">
                  {data.transcript.split('\n').filter(Boolean).map((line, i) => {
                    const isAgent = line.startsWith('Agent:');
                    const isSystem = line.startsWith('[System]');
                    const text = line.replace(/^(Agent:|Candidate:)\s*/, '');
                    if (isSystem) {
                      return (
                        <p key={i} className="text-[10px] italic text-slate-400 dark:text-slate-500 text-center py-1">{line}</p>
                      );
                    }
                    return (
                      <div key={i} className={`flex ${isAgent ? 'justify-start' : 'justify-end'}`}>
                        <div className={`max-w-[80%] px-3 py-2 text-xs font-medium rounded-none ${
                          isAgent
                            ? 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200'
                            : 'bg-[#405189] text-white'
                        }`}>
                          <p className={`text-[9px] font-extrabold uppercase tracking-wide mb-0.5 ${isAgent ? 'text-indigo-500' : 'text-indigo-200'}`}>
                            {isAgent ? 'AI Agent' : 'Candidate'}
                          </p>
                          {text}
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <p className="text-sm italic text-slate-400 dark:text-slate-500 text-center py-8">No transcript available.</p>
              )}
            </>
          )}
        </div>
      </motion.div>
    </div>
  );
}