"use client";

import * as React from "react";
import Link from "next/link";
import { format } from "date-fns";
import { ExternalLink } from "lucide-react";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import {
  CALENDAR_EVENT_TYPE_LABELS,
  type CalendarEvent,
} from "@/api/rtk/calendar-api";

interface CalendarEventDetailProps {
  event: CalendarEvent | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

function formatEventWhen(event: CalendarEvent): string {
  const start = new Date(event.start);
  if (Number.isNaN(start.getTime())) return "—";
  if (event.allDay) return format(start, "MMM d, yyyy");
  return format(start, "MMM d, yyyy h:mm a");
}

export function CalendarEventDetail({
  event,
  open,
  onOpenChange,
}: CalendarEventDetailProps) {
  if (!event) return null;

  const props = event.extendedProps;
  const typeLabel = CALENDAR_EVENT_TYPE_LABELS[props.sourceType];

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle className="pr-8">{event.title}</SheetTitle>
          <SheetDescription>{typeLabel}</SheetDescription>
        </SheetHeader>

        <dl className="mt-6 space-y-4 text-sm">
          <div>
            <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              When
            </dt>
            <dd className="mt-1">{formatEventWhen(event)}</dd>
          </div>

          {props.customerName ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Customer / lead
              </dt>
              <dd className="mt-1">{props.customerName}</dd>
            </div>
          ) : null}

          {props.status ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Status
              </dt>
              <dd className="mt-1">{props.status}</dd>
            </div>
          ) : null}

          {props.priority ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Priority
              </dt>
              <dd className="mt-1">{props.priority}</dd>
            </div>
          ) : null}

          {props.reminderText ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Reminder
              </dt>
              <dd className="mt-1 whitespace-pre-wrap">{props.reminderText}</dd>
            </div>
          ) : null}

          {props.milestoneName ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Milestone
              </dt>
              <dd className="mt-1">
                {props.milestoneName}
                {props.amount ? ` — ${props.amount}` : ""}
              </dd>
            </div>
          ) : null}

          {props.discoveryMeetingClientShowup != null ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                QA verification
              </dt>
              <dd className="mt-1">
                {props.discoveryMeetingClientShowup ? "Showed up" : "No-show"}
              </dd>
            </div>
          ) : props.sourceType === "qa_meeting" ? (
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                QA verification
              </dt>
              <dd className="mt-1 text-amber-700">Pending verification</dd>
            </div>
          ) : null}
        </dl>

        {props.url ? (
          <div className="mt-8">
            <Button asChild variant="outline" className="w-full">
              <Link href={props.url}>
                <ExternalLink className="mr-2 size-4" />
                Open in CRM
              </Link>
            </Button>
          </div>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}