"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Calendar,
  Mail,
  ExternalLink,
  RefreshCw,
  User,
  FileText,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SimpleTooltip } from "@/components/ui/tooltip";
import {
  formatDate,
  cn,
  normalizeMeetingStatus,
  getMeetingStatusLabel,
} from "@/lib/utils";
import {
  GoogleMeetIcon,
  MicrosoftTeamsIcon,
  ZoomIcon,
  JitsiIcon,
} from "@/components/ui/platform-icons";
import type { InvitedMeetingItem } from "@/types/api";

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 RSVP_STATUS_CONFIG: Record<
  string,
  {
    variant: "success" | "warning" | "destructive" | "secondary";
    label: string;
  }
> = {
  accepted: { variant: "success", label: "Accepted" },
  tentative: { variant: "warning", label: "Tentative" },
  declined: { variant: "destructive", label: "Declined" },
  needsAction: { variant: "secondary", label: "Needs Action" },
};

const STATUS_CONFIG: Record<
  string,
  {
    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" },
};

interface InvitedMeetingCardProps {
  meeting: InvitedMeetingItem;
}

export function InvitedMeetingCard({ meeting }: InvitedMeetingCardProps) {
  const pathname = usePathname();
  const platform = meeting.platform ? PLATFORM_CONFIG[meeting.platform] : null;
  const PlatformIcon = platform?.icon;
  const rsvp = RSVP_STATUS_CONFIG[meeting.guest_rsvp_status] ?? {
    variant: "secondary",
    label: meeting.guest_rsvp_status || "Needs Action",
  };

  const normalizedStatus = meeting.meeting_status
    ? normalizeMeetingStatus(meeting.meeting_status)
    : "scheduled";

  const displayStatusLabel = meeting.meeting_status
    ? getMeetingStatusLabel(meeting.meeting_status)
    : "Scheduled";

  const statusCfg = STATUS_CONFIG[normalizedStatus] ?? { variant: "secondary" };

  const showViewNotes =
    meeting.has_meeting_access === true &&
    meeting.has_recording === true &&
    meeting.has_transcript === true &&
    (meeting.meeting_status === "bot.done" ||
      meeting.meeting_status === "transcript.done") &&
    meeting.transcript_status === "done";

  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",
      )}
    >
      {/* Platform top accent bar */}
      <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 & RSVP 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 || "Untitled meeting"}
          </h3>
          <div className="flex items-center gap-1.5 shrink-0">
            <Badge variant={rsvp.variant} className="text-[10px] px-1.5 py-0.5">
              {rsvp.label}
            </Badge>
            {meeting.meeting_status && (
              <Badge
                variant={statusCfg.variant}
                className="text-[10px] px-1.5 py-0.5 flex items-center gap-1"
              >
                {statusCfg.dot && (
                  <span
                    className={cn(
                      "h-1.5 w-1.5 rounded-full animate-pulse",
                      statusCfg.dot,
                    )}
                  />
                )}
                {displayStatusLabel}
              </Badge>
            )}
          </div>
        </div>

        {/* Platform + Date */}
        <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.5 w-3.5" />
            {formatDate(meeting.scheduled_at)}
          </span>
        </div>

        {/* Organizer details */}
        <div className="space-y-1">
          <div className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
            <User className="h-3.5 w-3.5 text-gray-400 shrink-0" />
            <span className="truncate">
              Host User ID: {meeting.host_user_id}
            </span>
          </div>
          {meeting.organizer_email && (
            <div className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
              <Mail className="h-3.5 w-3.5 text-gray-400 shrink-0" />
              <span className="truncate" title={meeting.organizer_email}>
                {meeting.organizer_email}
              </span>
            </div>
          )}
        </div>

        {/* Recurring and/or other meta indicators */}
        {meeting.is_recurring && (
          <div className="flex items-center gap-1 rounded bg-blue-50/50 dark:bg-blue-950/20 px-2 py-1 w-max">
            <RefreshCw className="h-2.5 w-2.5 text-blue-500 animate-[spin_4s_linear_infinite]" />
            <span className="text-[9px] text-blue-600 dark:text-blue-400 font-medium">
              Recurring Series
            </span>
          </div>
        )}

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

        {/* Action button */}
        <div className="flex items-center gap-2 mt-auto">
          {showViewNotes && meeting.meeting_id ? (
            <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.meeting_id}?from=${encodeURIComponent(pathname)}`}
                >
                  <FileText className="h-3 w-3" />
                  View Notes
                </Link>
              </Button>
            </SimpleTooltip>
          ) : normalizedStatus === "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>
          ) : normalizedStatus === "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>
          ) : normalizedStatus === "abort" ? (
            <Button
              size="sm"
              variant="outline"
              className="flex-1 h-8 text-xs text-gray-400"
              disabled
            >
              Aborted
            </Button>
          ) : normalizedStatus === "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>
          ) : normalizedStatus === "completed" ? (
            <Button
              size="sm"
              variant="secondary"
              className="flex-1 h-8 text-xs text-gray-400"
              disabled
            >
              Meeting Ended
            </Button>
          ) : normalizedStatus === "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>
          ) : normalizedStatus === "live" && meeting.meet_link ? (
            <SimpleTooltip content="Open meeting link to join live call">
              <Button
                asChild
                size="sm"
                className="flex-1 h-8 text-xs gap-1.5 bg-red-600 hover:bg-red-700 text-white border-0"
              >
                <a
                  href={meeting.meet_link}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
                  Join Live Meeting
                </a>
              </Button>
            </SimpleTooltip>
          ) : meeting.meeting_status ===
            "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.meet_link ? (
            <SimpleTooltip content="Open meeting link to join call">
              <Button asChild size="sm" className="flex-1 h-8 text-xs gap-1.5">
                <a
                  href={meeting.meet_link}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <ExternalLink className="h-3 w-3" />
                  Join Meeting
                </a>
              </Button>
            </SimpleTooltip>
          ) : (
            <Button
              size="sm"
              variant="outline"
              className="flex-1 h-8 text-xs text-gray-400"
              disabled
            >
              No meeting link
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}