"use client";

import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";

import Link from "next/link";
import {
  Calendar,
  Clock,
  Users,
  ExternalLink,
  StopCircle,
  FileText,
} from "lucide-react";
import { Meeting, isMeetingActive } from "@/types";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { SimpleTooltip } from "@/components/ui/tooltip";
import {
  formatDate,
  formatDuration,
  getInitials,
  getMeetingStatusLabel,
  cn,
} from "@/lib/utils";
import {
  GoogleMeetIcon,
  MicrosoftTeamsIcon,
  ZoomIcon,
  JitsiIcon,
} from "@/components/ui/platform-icons";
import { stopRecording, setRecurringCandidateDecision } from "@/lib/api";
import { useMeetingsStore, useUserStore } from "@/store";
import { Switch } from "@/components/ui/switch";

// ─── Platform config ──────────────────────────────────────────────────────────
const PLATFORM_CONFIG: Record<
  string,
  {
    icon: React.ComponentType<{ size?: number }>;
    label: string;
    color: string;
    bg: string;
  }
> = {
  google_meet: {
    icon: GoogleMeetIcon,
    label: "Google Meet",
    color: "text-emerald-600 dark:text-emerald-400",
    bg: "bg-emerald-50 dark:bg-emerald-950/40",
  },
  microsoft_teams: {
    icon: MicrosoftTeamsIcon,
    label: "Microsoft Teams",
    color: "text-indigo-600 dark:text-indigo-400",
    bg: "bg-indigo-50 dark:bg-indigo-950/40",
  },
  zoom: {
    icon: ZoomIcon,
    label: "Zoom",
    color: "text-blue-600 dark:text-blue-400",
    bg: "bg-blue-50 dark:bg-blue-950/40",
  },
  jitsi: {
    icon: JitsiIcon,
    label: "Jitsi",
    color: "text-sky-600 dark:text-sky-400",
    bg: "bg-sky-50 dark:bg-sky-950/40",
  },
};

const statusConfig: Record<
  Meeting["status"],
  {
    variant: "default" | "success" | "warning" | "destructive" | "secondary";
    dot?: string;
  }
> = {
  pending: { variant: "secondary" },
  bot_created: { variant: "warning", dot: "bg-yellow-400" },
  in_lobby: { variant: "warning", dot: "bg-yellow-400" },
  live: { variant: "destructive", dot: "bg-white" },
  not_admitted: { variant: "destructive" },
  processing: { variant: "warning", dot: "bg-yellow-400" },
  completed: { variant: "success" },
  too_short: { variant: "warning" },
  abort: { variant: "secondary" },
  failed: { variant: "secondary" },
  scheduled: { variant: "default" },
};

const AVATAR_COLORS = [
  "from-blue-400 to-blue-600",
  "from-violet-400 to-violet-600",
  "from-emerald-400 to-emerald-600",
  "from-orange-400 to-orange-600",
  "from-pink-400 to-pink-600",
];

interface MeetingCardProps {
  meeting: Meeting;
  onStopped?: () => void;
}

export function MeetingCard({ meeting, onStopped }: MeetingCardProps) {
  const updateMeeting = useMeetingsStore((s) => s.updateMeeting);
  const userId = useUserStore((s) => s.userId);
  const pathname = usePathname();
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [stopping, setStopping] = useState(false);
  const [toggling, setToggling] = useState(false);
  const [botEnabled, setBotEnabled] = useState(
    meeting.appToggleEnabled ?? false,
  );

  useEffect(() => {
    setBotEnabled(meeting.appToggleEnabled ?? false);
  }, [meeting.appToggleEnabled]);

  const handleToggleBot = async (checked: boolean) => {
    const numericId = meeting.id ? Number(meeting.id) : null;
    const idToUse =
      meeting.recurringCandidateId ??
      (numericId && !isNaN(numericId) ? numericId : null);

    if (!idToUse) {
      console.error(
        "No identifier available (recurringCandidateId or meeting id); cannot update recurring bot decision.",
      );
      return;
    }
    setToggling(true);
    setBotEnabled(checked);
    try {
      const res = await setRecurringCandidateDecision(idToUse, {
        action: checked ? "on" : "off",
      });
      if (res.success) {
        updateMeeting(meeting.id, { appToggleEnabled: checked });
      } else {
        setBotEnabled(!checked);
      }
    } catch (err) {
      console.error("Could not update recurring bot decision", err);
      setBotEnabled(!checked);
    } finally {
      setToggling(false);
    }
  };

  const sc = statusConfig[meeting.status];
  const displayLabel = getMeetingStatusLabel(
    meeting.rawStatus ?? meeting.status,
  );
  const isActive =
    isMeetingActive(meeting.status) && meeting.status !== "pending";
  const isFinished =
    meeting.status === "completed" ||
    meeting.status === "not_admitted" ||
    meeting.status === "abort" ||
    meeting.status === "failed";
  const platform = meeting.platform ? PLATFORM_CONFIG[meeting.platform] : null;
  const PlatformIcon = platform?.icon;

  // Use participantNames from API (participants_details.names)
  const names = meeting.participantNames ?? [];
  const visibleNames = names.slice(0, 3);
  const extraCount = names.length - visibleNames.length;

  const handleStopRecording = async () => {
    setStopping(true);
    try {
      const res = await stopRecording(Number(meeting.id));
      if (res.success) {
        updateMeeting(meeting.id, { status: "processing" });
        onStopped?.();
      }
    } catch (err) {
      console.error("Could not stop recording", err);
    } finally {
      setStopping(false);
      setConfirmOpen(false);
    }
  };

  return (
    <>
      <div
        className={cn(
          "group relative flex flex-col rounded-2xl border bg-white dark:bg-gray-900 overflow-hidden",
          "border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700",
          "hover:shadow-md transition-all duration-200",
        )}
      >
        {/* ── Colored top accent bar based on platform ── */}
        <div
          className={cn(
            "h-1 w-full",
            meeting.platform === "google_meet" &&
              "bg-gradient-to-r from-emerald-400 to-emerald-600",
            meeting.platform === "microsoft_teams" &&
              "bg-gradient-to-r from-indigo-400 to-indigo-600",
            meeting.platform === "zoom" &&
              "bg-gradient-to-r from-blue-400 to-blue-600",
            meeting.platform === "jitsi" &&
              "bg-gradient-to-r from-sky-400 to-sky-600",
            !meeting.platform &&
              "bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600",
          )}
        />

        <div className="flex flex-col flex-1 p-4 space-y-3">
          {/* ── Header: title + status badge ── */}
          <div className="flex items-start justify-between gap-2">
            <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 line-clamp-1 leading-snug">
              {meeting.title}
            </h3>
            <Badge
              variant={sc.variant}
              className="shrink-0 flex items-center gap-1 text-[10px] px-1.5 py-0.5"
            >
              {sc.dot && (
                <span
                  className={cn(
                    "h-1.5 w-1.5 rounded-full animate-pulse",
                    sc.dot,
                  )}
                />
              )}
              {displayLabel}
            </Badge>
          </div>

          {/* ── Platform + date row ── */}
          <div className="flex items-center gap-2 flex-wrap">
            {platform && PlatformIcon && (
              <div
                className={cn(
                  "flex items-center gap-1.5 rounded-full px-2 py-0.5",
                  platform.bg,
                )}
              >
                <PlatformIcon size={12} />
                <span
                  className={cn("text-[10px] font-semibold", platform.color)}
                >
                  {platform.label}
                </span>
              </div>
            )}
            <span className="flex items-center gap-1 text-[11px] text-gray-400 dark:text-gray-500">
              <Calendar className="h-3 w-3" />
              {formatDate(meeting.date)}
            </span>
          </div>

          {/* ── Duration + participant count ── */}
          <div className="flex items-center gap-3 text-[11px] text-gray-500 dark:text-gray-400">
            {meeting.duration > 0 && (
              <span className="flex items-center gap-1">
                <Clock className="h-3 w-3" />
                {formatDuration(meeting.duration)}
              </span>
            )}
            <span className="flex items-center gap-1">
              <Users className="h-3 w-3" />
              {names.length} participant{names.length !== 1 ? "s" : ""}
            </span>
          </div>

          {/* ── Participants ── */}
          {visibleNames.length > 0 ? (
            <div className="flex items-center gap-1.5 flex-wrap">
              {visibleNames.map((name, i) => (
                <div
                  key={name}
                  className="flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 pl-0.5 pr-2 py-0.5"
                >
                  <Avatar className="h-4 w-4 shrink-0">
                    <AvatarFallback
                      className={cn(
                        "text-[8px] font-bold text-white bg-gradient-to-br",
                        AVATAR_COLORS[i % AVATAR_COLORS.length],
                      )}
                    >
                      {getInitials(name)}
                    </AvatarFallback>
                  </Avatar>
                  <span className="text-[10px] font-medium text-gray-700 dark:text-gray-300 max-w-[80px] truncate">
                    {name}
                  </span>
                </div>
              ))}
              {extraCount > 0 && (
                <span className="text-[10px] text-gray-400 dark:text-gray-500 font-medium">
                  +{extraCount} more
                </span>
              )}
            </div>
          ) : (
            <div className="flex items-center gap-1.5">
              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                <Users className="h-2.5 w-2.5 text-gray-400" />
              </div>
              <span className="text-[10px] text-gray-400 dark:text-gray-500">
                No participants recorded
              </span>
            </div>
          )}

          {/* ── Divider ── */}
          <div className="border-t border-gray-100 dark:border-gray-800" />

          {/* ── Actions ── */}
          <div className="flex items-center gap-2 mt-auto">
            {isActive && (
              <SimpleTooltip content="Stop recording and process transcript">
                <Button
                  size="sm"
                  variant="destructive"
                  className="flex-1 gap-1.5 h-8 text-xs"
                  onClick={() => setConfirmOpen(true)}
                >
                  <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
                  {meeting.status === "live"
                    ? "Live — Stop"
                    : "In Lobby — Stop"}
                  <StopCircle className="h-3 w-3 ml-auto opacity-80" />
                </Button>
              </SimpleTooltip>
            )}

            {meeting.status === "pending" && (
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 h-8 text-xs"
                disabled
              >
                <span className="h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse mr-1.5" />
                Waiting for bot…
              </Button>
            )}

            {meeting.status === "bot_created" && (
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 h-8 text-xs"
                disabled
              >
                <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate-pulse mr-1.5" />
                Bot joining…
              </Button>
            )}

            {meeting.status === "processing" && (
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 h-8 text-xs"
                disabled
              >
                <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate-pulse mr-1.5" />
                Transcribing…
              </Button>
            )}

            {meeting.status === "completed" && (
              <SimpleTooltip content="View transcript and meeting notes">
                <Button
                  asChild
                  size="sm"
                  className="flex-1 h-8 text-xs gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white border-0"
                >
                  <Link
                    href={`/meetings/${meeting.id}?from=${encodeURIComponent(pathname)}`}
                  >
                    <FileText className="h-3 w-3" />
                    View Notes
                  </Link>
                </Button>
              </SimpleTooltip>
            )}

            {meeting.status === "failed" && (
              <Button
                size="sm"
                variant="outline"
                className="flex-1 h-8 text-xs text-red-500 dark:text-red-400 border-red-200 dark:border-red-900"
                disabled
              >
                Failed
              </Button>
            )}

            {meeting.status === "abort" && (
              <Button
                size="sm"
                variant="outline"
                className="flex-1 h-8 text-xs text-gray-400"
                disabled
              >
                Aborted
              </Button>
            )}

            {meeting.status === "scheduled" &&
              meeting.rawStatus !== "recurring.waiting_for_calendar_yes" &&
              !(meeting.rawStatus === "scheduled" && !meeting.isRecurring) && (
                <div className="flex items-center justify-between w-full border rounded-lg px-2.5 py-1 border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-950/20">
                  <div className="flex flex-col text-left">
                    <span className="text-[10px] font-semibold text-gray-500 dark:text-gray-400">
                      Meeting Bot
                    </span>
                    <span className="text-[9px] text-gray-400 dark:text-gray-500 font-normal">
                      Auto-join call
                    </span>
                  </div>
                  <Switch
                    checked={botEnabled}
                    onCheckedChange={handleToggleBot}
                    disabled={
                      toggling ||
                      (!meeting.recurringCandidateId &&
                        isNaN(Number(meeting.id)))
                    }
                    className="scale-75 origin-right"
                  />
                </div>
              )}

            {meeting.rawStatus === "recurring.waiting_for_calendar_yes" && (
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 h-8 text-xs text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-950/20"
                disabled
              >
                <span className="h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse mr-1.5" />
                Awaiting Calendar Confirmation
              </Button>
            )}

            {meeting.status === "scheduled" &&
              meeting.rawStatus === "scheduled" &&
              !meeting.isRecurring && (
                <Button
                  size="sm"
                  variant="secondary"
                  className="flex-1 h-8 text-xs"
                  disabled
                >
                  <span className="h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse mr-1.5" />
                  Scheduled
                </Button>
              )}

            {meeting.status === "too_short" && (
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 h-8 text-xs text-yellow-700 dark:text-yellow-400"
                disabled
              >
                Too Short
              </Button>
            )}

            {meeting.status === "not_admitted" && (
              <Button
                size="sm"
                variant="outline"
                className="flex-1 h-8 text-xs text-red-600 dark:text-red-400 border-red-200 dark:border-red-900 bg-red-50/50 dark:bg-red-950/20"
                disabled
              >
                Not Admitted
              </Button>
            )}

            {/* Open meeting link */}
            {meeting.meetLink && (
              <SimpleTooltip
                content={
                  isFinished
                    ? "Meeting ended"
                    : `Open in ${platform?.label ?? "meeting"}`
                }
              >
                {isFinished ? (
                  <button
                    disabled
                    className={cn(
                      "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border",
                      "border-gray-200 dark:border-gray-850 bg-gray-50 dark:bg-gray-950 text-gray-400 dark:text-gray-600 cursor-not-allowed opacity-40",
                    )}
                  >
                    <ExternalLink className="h-3.5 w-3.5" />
                  </button>
                ) : (
                  <a
                    href={meeting.meetLink}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={cn(
                      "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border transition-colors",
                      "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900",
                      "hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400",
                    )}
                  >
                    <ExternalLink className="h-3.5 w-3.5" />
                  </a>
                )}
              </SimpleTooltip>
            )}
          </div>
        </div>
      </div>

      {/* ── Stop confirm dialog ── */}
      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <StopCircle className="h-5 w-5 text-red-500" />
              Stop Recording?
            </DialogTitle>
            <DialogDescription>
              This will stop the bot and end the recording for{" "}
              <span className="font-semibold text-gray-900 dark:text-gray-100">
                &quot;{meeting.title}&quot;
              </span>
              . Transcription will begin automatically.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2 mt-2">
            <Button
              variant="outline"
              onClick={() => setConfirmOpen(false)}
              disabled={stopping}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={handleStopRecording}
              disabled={stopping}
            >
              {stopping ? (
                <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
              ) : (
                <StopCircle className="h-4 w-4" />
              )}
              {stopping ? "Stopping…" : "Stop Recording"}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}