"use client";

import { use, useEffect, useState } from "react";
import Link from "next/link";
import {
  AlertTriangle,
  ArrowLeft,
  Clock,
  Copy,
  Download,
  ExternalLink,
  ListChecks,
  Sparkles,
  Users,
  Loader2,
} from "lucide-react";
import { useAdminStore } from "@/store";
import { downloadTranscriptPdf, downloadFromS3 } from "@/lib/api";
import { getInitials, getMeetingStatusLabel, normalizeMeetingStatus } from "@/lib/utils";
import { PageHeader } from "@/components/ui/page-components";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

import { STATUS_BADGE, PLATFORM_CONFIG } from "./components/admin-detail-constants";
import { MetricCard } from "./components/MeetingDetailSubComponents";
import { OverviewTab } from "./components/OverviewTab";
import { ParticipantsTab } from "./components/ParticipantsTab";
import { TranscriptTab } from "./components/TranscriptTab";
import { ProcessingTab } from "./components/ProcessingTab";
import { AuditTab } from "./components/AuditTab";
import { SidebarSection } from "./components/SidebarSection";

export default function AdminMeetingDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const {
    selectedMeeting: meeting,
    selectedMeetingLoading: loading,
    selectedMeetingError: error,
    fetchMeetingDetail,
    setSelectedMeeting,
  } = useAdminStore();

  const [pdfLoading, setPdfLoading] = useState(false);
  const [audioLoading, setAudioLoading] = useState(false);
  const [videoLoading, setVideoLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    fetchMeetingDetail(id);
    return () => {
      setSelectedMeeting(null);
    };
  }, [id, fetchMeetingDetail, setSelectedMeeting]);

  const handleDownloadPdf = async () => {
    if (pdfLoading) return;
    setPdfLoading(true);
    try {
      await downloadTranscriptPdf(id);
    } catch (err) {
      console.error("PDF download failed", err);
    } finally {
      setPdfLoading(false);
    }
  };

  const handleDownloadAudio = async () => {
    if (!meeting?.recording_url) return;
    setAudioLoading(true);
    try {
      if (meeting.recording_url.startsWith("http")) {
        const urlObj = new URL(meeting.recording_url);
        const fileName = urlObj.pathname.split("/").pop() || `recording_${meeting.meeting_id}.mp3`;
        await downloadFromS3(meeting.recording_url, fileName);
      }
    } catch (err) {
      console.error("Audio download failed", err);
    } finally {
      setAudioLoading(false);
    }
  };

  const handleDownloadVideo = async () => {
    if (!meeting?.video_recording_url) return;
    setVideoLoading(true);
    try {
      if (meeting.video_recording_url.startsWith("http")) {
        const urlObj = new URL(meeting.video_recording_url);
        const fileName = urlObj.pathname.split("/").pop() || `video_${meeting.meeting_id}.mp4`;
        await downloadFromS3(meeting.video_recording_url, fileName);
      }
    } catch (err) {
      console.error("Video download failed", err);
    } finally {
      setVideoLoading(false);
    }
  };

  if (loading || (!meeting && !error)) {
    return (
      <div className="flex items-center justify-center py-32">
        <Loader2 className="h-8 w-8 text-red-500 animate-spin" />
      </div>
    );
  }

  if (error || !meeting) {
    return (
      <div className="flex flex-col items-center justify-center py-32 text-center gap-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-950">
          <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Failed to load meeting details</h2>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{error || "Meeting not found"}</p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin/meetings">Back to all meetings</Link>
        </Button>
      </div>
    );
  }

  const status = normalizeMeetingStatus(meeting.status);
  const platform = meeting.platform ? PLATFORM_CONFIG[meeting.platform] : null;
  const PlatformIcon = platform?.icon;
  const completedCount = meeting.summary.action_items.filter((item) => item.status === "done").length;

  const uniqueSpeakers = Array.from(new Set(meeting.transcript.map((line) => line.speaker)));
  const filteredTranscript = meeting.transcript.filter(
    (line) =>
      line.speaker.toLowerCase().includes(searchTerm.toLowerCase()) ||
      line.text.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex items-start gap-4">
        <SimpleTooltip content="Back to all meetings">
          <Button asChild variant="ghost" size="icon" className="mt-1 shrink-0">
            <Link href="/admin/meetings" aria-label="Back to all meetings">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
        </SimpleTooltip>

        <div className="min-w-0 flex-1">
          <PageHeader title={meeting.title} description={`Meeting ID ${meeting.meeting_id} - ${meeting.meeting_uuid}`} />
          <div className="mt-3 flex flex-wrap items-center gap-2">
            <Badge variant={STATUS_BADGE[status] ?? "secondary"}>{getMeetingStatusLabel(meeting.status)}</Badge>
            {meeting.is_guest && (
              <Badge variant="outline" className="bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400 border border-amber-200/50 dark:border-amber-900/50 text-[10px] font-semibold">
                Guest
              </Badge>
            )}
            {platform && PlatformIcon && (
              <span className={cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold", platform.className)}>
                <PlatformIcon size={13} />
                {platform.label}
              </span>
            )}
            <Badge variant="outline">{meeting.visibility}</Badge>
            <Badge variant="outline">{meeting.language}</Badge>
          </div>
        </div>

        <div className="flex shrink-0 items-center gap-2">
          <SimpleTooltip content="Copy meeting ID">
            <Button variant="outline" size="icon" aria-label="Copy meeting ID">
              <Copy className="h-4 w-4" />
            </Button>
          </SimpleTooltip>
          <SimpleTooltip content="Download meeting export">
            <Button variant="outline" size="icon" aria-label="Download meeting export">
              <Download className="h-4 w-4" />
            </Button>
          </SimpleTooltip>
          {meeting.meet_link && (
            <SimpleTooltip content="Open meeting link">
              <Button asChild variant="outline" size="icon">
                <a href={meeting.meet_link} target="_blank" rel="noopener noreferrer" aria-label="Open meeting link">
                  <ExternalLink className="h-4 w-4" />
                </a>
              </Button>
            </SimpleTooltip>
          )}
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard icon={Clock} label="Duration" value={meeting.recording_details?.duration_formatted || "Pending"} />
        <MetricCard icon={Users} label="Participants" value={`${meeting.participants_details?.count ?? meeting.participants.length}`} />
        <MetricCard icon={Sparkles} label="AI confidence" value={`${meeting.analytics.ai_confidence}%`} />
        <MetricCard icon={ListChecks} label="Action items" value={`${completedCount}/${meeting.summary.action_items.length} done`} />
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <Tabs defaultValue="overview" className="min-w-0">
          <TabsList className="flex h-auto flex-wrap justify-start">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="participants">Participants</TabsTrigger>
            <TabsTrigger value="transcript">Transcript</TabsTrigger>
            <TabsTrigger value="processing">Processing</TabsTrigger>
            <TabsTrigger value="audit">Audit</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-4">
            <OverviewTab meeting={meeting} completedCount={completedCount} />
          </TabsContent>

          <TabsContent value="participants">
            <ParticipantsTab meeting={meeting} />
          </TabsContent>

          <TabsContent value="transcript">
            <TranscriptTab
              meeting={meeting}
              searchTerm={searchTerm}
              setSearchTerm={setSearchTerm}
              filteredTranscript={filteredTranscript}
              uniqueSpeakers={uniqueSpeakers}
            />
          </TabsContent>

          <TabsContent value="processing" className="space-y-4">
            <ProcessingTab meeting={meeting} />
          </TabsContent>

          <TabsContent value="audit">
            <AuditTab meeting={meeting} />
          </TabsContent>
        </Tabs>

        <SidebarSection
          meeting={meeting}
          videoLoading={videoLoading}
          audioLoading={audioLoading}
          pdfLoading={pdfLoading}
          handleDownloadVideo={handleDownloadVideo}
          handleDownloadAudio={handleDownloadAudio}
          handleDownloadPdf={handleDownloadPdf}
        />
      </div>
    </div>
  );
}