"use client";

import { use, useEffect, useMemo } from "react";
import { notFound, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Calendar, Clock, Users, Download, Share2, RefreshCw, AlertCircle, Loader2, FileText } from "lucide-react";
import { useMeetingsStore } from "@/store";
import { useMeetings } from "@/hooks/use-meetings";
import { useTranscript } from "@/hooks/use-transcript";
import { TranscriptViewer } from "@/components/features/transcript-viewer";
import { SummaryPanel } from "@/components/features/summary-panel";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { formatDate, formatDuration, getInitials, getMeetingStatusLabel } from "@/lib/utils";
import { downloadTranscriptPdf, listInvitedMeetings } from "@/lib/api";
import { useState } from "react";
import type { Meeting } from "@/types";

export default function MeetingDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const searchParams = useSearchParams();
  const fromPath = searchParams.get("from");

  // Check store BEFORE any hooks — if meetings already loaded (navigated from dashboard)
  // we skip the list-meetings fetch entirely
  const storeAlreadyLoaded = useMeetingsStore.getState().meetings.length > 0;

  // Only fetch list when store is empty (direct URL / page refresh)
  const { fetchMore } = useMeetings({ skip: storeAlreadyLoaded });

  const loading     = useMeetingsStore((s) => s.loading);
  const loadingMore = useMeetingsStore((s) => s.loadingMore);
  const pagination  = useMeetingsStore((s) => s.pagination);

  const meetingFromStore = useMeetingsStore((s) => s.meetings.find((m) => m.id === id));
  const invitedFromStore = useMeetingsStore((s) => s.invitedMeetings?.find((item) => String(item.meeting_id) === id));

  const meeting = useMemo(() => {
    if (meetingFromStore) return meetingFromStore;
    if (invitedFromStore) {
      return {
        id: String(invitedFromStore.meeting_id),
        title: invitedFromStore.title || "Untitled meeting",
        date: invitedFromStore.scheduled_at,
        duration: 0,
        participants: [],
        transcript: [],
        status: "completed",
        rawStatus: invitedFromStore.meeting_status,
        platform: invitedFromStore.platform,
        meetLink: invitedFromStore.meet_link,
        isRecurring: invitedFromStore.is_recurring,
      } as Meeting;
    }
    return undefined;
  }, [meetingFromStore, invitedFromStore]);

  const [invitedLoading, setInvitedLoading] = useState(!storeAlreadyLoaded);

  // Fetch invited meetings if store was empty on mount
  useEffect(() => {
    if (storeAlreadyLoaded) {
      setInvitedLoading(false);
      return;
    }
    listInvitedMeetings()
      .then((res) => {
        if (res.success && Array.isArray(res.data)) {
          useMeetingsStore.getState().setInvitedMeetings(res.data);
        }
      })
      .catch((err) => {
        console.error("Failed to load invited meetings on page refresh", err);
      })
      .finally(() => {
        setInvitedLoading(false);
      });
  }, [storeAlreadyLoaded]);

  // When store was empty on mount and page 1 loaded but meeting not found — fetch more pages
  useEffect(() => {
    if (storeAlreadyLoaded) return; // store was pre-loaded, no need
    if (meeting || loading || loadingMore || !pagination) return;
    const allLoaded = useMeetingsStore.getState().meetings.length >= pagination.total;
    if (!allLoaded) fetchMore();
  }, [loading, loadingMore, pagination, meeting, fetchMore, storeAlreadyLoaded]);

  const isCompleted = meeting?.status === "completed";

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

  const { data: transcriptData, loading: transcriptLoading, error: transcriptError, notFound: transcriptNotFound, refetch } =
    useTranscript(id, true);

  // Show spinner while loading or meeting not yet found
  if (loading || loadingMore || invitedLoading || !meeting) {
    const state = useMeetingsStore.getState();
    const allLoaded =
      !state.loading &&
      !state.loadingMore &&
      state.pagination !== null &&
      state.meetings.length >= state.pagination.total;
    if (allLoaded && !invitedLoading && !meeting) notFound();
    return (
      <div className="flex items-center justify-center py-32">
        <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-6">

      {/* ── Header ── */}
      <div className="flex items-start gap-4">
        <SimpleTooltip content="Back to meetings list">
          <Button
            asChild variant="ghost" size="icon"
            className="mt-1 shrink-0 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
          >
            <Link href={fromPath || "/meetings"} aria-label="Back to meetings list">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
        </SimpleTooltip>

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-3 flex-wrap">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">{meeting.title}</h1>
            <SimpleTooltip content={`Meeting status: ${getMeetingStatusLabel(meeting.rawStatus ?? meeting.status)}`}>
              <Badge variant={meeting.status === "completed" ? "success" : "warning"}>
                {getMeetingStatusLabel(meeting.rawStatus ?? meeting.status)}
              </Badge>
            </SimpleTooltip>
          </div>
          <div className="flex flex-wrap gap-4 mt-2 text-sm text-gray-500 dark:text-gray-400">
            <span className="flex items-center gap-1"><Calendar className="h-3.5 w-3.5" />{formatDate(meeting.date)}</span>
            {transcriptData && (
              <span className="flex items-center gap-1">
                <Clock className="h-3.5 w-3.5" />
                {Math.floor(transcriptData.duration_seconds / 60)}m {Math.floor(transcriptData.duration_seconds % 60)}s
              </span>
            )}
            {!transcriptData && meeting.duration > 0 && (
              <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" />{formatDuration(meeting.duration)}</span>
            )}
            <span className="flex items-center gap-1">
              <Users className="h-3.5 w-3.5" />
              {transcriptData
                ? (transcriptData.participants?.length ?? 0)
                : (meeting.participants?.length ?? 0)} participants
            </span>
          </div>
        </div>

        <div className="flex items-center gap-2 shrink-0">
          <SimpleTooltip content="Share meeting notes">
            <Button variant="outline" size="icon" aria-label="Share meeting notes"><Share2 className="h-4 w-4" /></Button>
          </SimpleTooltip>
          <SimpleTooltip content="Export meeting notes as PDF">
            <Button
              variant="outline" size="icon"
              aria-label="Export as PDF"
              onClick={handleDownloadPdf}
              disabled={pdfLoading || !isCompleted}
            >
              {pdfLoading
                ? <Loader2 className="h-4 w-4 animate-spin" />
                : <Download className="h-4 w-4" />}
            </Button>
          </SimpleTooltip>
        </div>
      </div>

      {/* Participants from transcript API */}
      {transcriptData && (transcriptData.participants?.length ?? 0) > 0 && (
        <div className="flex items-center gap-3 flex-wrap">
          <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Participants:</span>
          <div className="flex items-center gap-2 flex-wrap">
            {transcriptData.participants.map((name) => (
              <SimpleTooltip key={name} content={`Participant: ${name}`}>
                <div className="flex items-center gap-1.5 rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 cursor-default">
                  <Avatar className="h-5 w-5">
                    <AvatarFallback className="text-[9px]">{getInitials(name)}</AvatarFallback>
                  </Avatar>
                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{name}</span>
                </div>
              </SimpleTooltip>
            ))}
          </div>
        </div>
      )}

      {/* Fallback participants from store */}
      {!transcriptData && (meeting.participants?.length ?? 0) > 0 && (
        <div className="flex items-center gap-3 flex-wrap">
          <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Participants:</span>
          <div className="flex items-center gap-2 flex-wrap">
            {meeting.participants.map((p) => (
              <SimpleTooltip key={p.id} content={`Participant: ${p.name} (${p.email})`}>
                <div className="flex items-center gap-1.5 rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 cursor-default">
                  <Avatar className="h-5 w-5">
                    <AvatarFallback className="text-[9px]">{getInitials(p.name)}</AvatarFallback>
                  </Avatar>
                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{p.name}</span>
                </div>
              </SimpleTooltip>
            ))}
          </div>
        </div>
      )}

      <Separator />

      {/* Tabs */}
        <Tabs defaultValue={isCompleted ? "transcript" : "summary"} className="space-y-4">
          <TabsList>
          <SimpleTooltip content="View transcript organized by speaker">
            <TabsTrigger value="transcript">
              Transcript
              {transcriptData && (transcriptData.transcript?.length ?? 0) > 0 && (
                <span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">
                  ({transcriptData.transcript.length})
                </span>
              )}
            </TabsTrigger>
          </SimpleTooltip>
          <SimpleTooltip content="View AI-generated summary and action items">
            <TabsTrigger value="summary">Summary</TabsTrigger>
          </SimpleTooltip>
        </TabsList>

        {/* Transcript tab */}
        <TabsContent value="transcript">
          {!isCompleted ? (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <Clock className="h-10 w-10 text-gray-300 dark:text-gray-600 mb-3" />
              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Transcript not available yet</p>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Transcript is generated once the meeting is completed.
              </p>
            </div>
          ) : transcriptLoading ? (
            <div className="flex flex-col items-center justify-center py-16 gap-3">
              <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
              <p className="text-sm text-gray-500 dark:text-gray-400">Loading transcript…</p>
            </div>
          ) : transcriptNotFound ? (
            <div className="flex flex-col items-center justify-center py-16 text-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-950">
                <FileText className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Transcript is not ready yet</p>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-sm">
                  We found this meeting, but the transcript has not been generated or synced yet.
                </p>
              </div>
              <div className="flex items-center gap-2">
                <SimpleTooltip content="Check again for transcript data">
                  <Button variant="outline" size="sm" onClick={refetch} className="gap-2">
                    <RefreshCw className="h-3.5 w-3.5" />
                    Check again
                  </Button>
                </SimpleTooltip>
                <SimpleTooltip content="Return to meetings list">
                  <Button asChild variant="ghost" size="sm">
                    <Link href="/meetings">Back to meetings</Link>
                  </Button>
                </SimpleTooltip>
              </div>
            </div>
          ) : transcriptError ? (
            <div className="flex flex-col items-center justify-center py-16 text-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-950">
                <AlertCircle className="h-6 w-6 text-red-500" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Failed to load transcript</p>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{transcriptError}</p>
              </div>
              <SimpleTooltip content="Retry loading transcript">
                <Button variant="outline" size="sm" onClick={refetch} className="gap-2">
                  <RefreshCw className="h-3.5 w-3.5" />
                  Retry
                </Button>
              </SimpleTooltip>
            </div>
          ) : transcriptData ? (
            transcriptData.status === "too_short" ? (
              <div className="flex flex-col items-center justify-center py-16 text-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-950">
                  <Clock className="h-6 w-6 text-yellow-500" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Meeting was too short</p>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    The recording was too brief to generate a transcript.
                  </p>
                </div>
              </div>
            ) : (
              <TranscriptViewer data={transcriptData} />
            )
          ) : (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <p className="text-sm text-gray-500 dark:text-gray-400">No transcript data available.</p>
            </div>
          )}
        </TabsContent>

        {/* Summary tab */}
        <TabsContent value="summary">
          {meeting.summary ? (
            <SummaryPanel summary={meeting.summary} meetingId={meeting.id} />
          ) : (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <p className="text-gray-500 dark:text-gray-400">Summary not available yet.</p>
              <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
                {meeting.status === "processing" ? "Processing in progress..." : "Check back later."}
              </p>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}