"use client"

import { useMemo } from "react"
import { Icon } from "@iconify/react"
import { addDays, addHours, setHours, setMinutes, startOfDay } from "date-fns"
import { CalendarInvitationPreview } from "@/components/gmail/calendar-invitation-preview"
import type { ParsedCalendarInvitation } from "@/lib/calendar-invitation"
import { ULTICAL_APP_NAME } from "@/lib/suite/page-metadata"

function buildDemoInvitation(): ParsedCalendarInvitation {
  const start = setMinutes(setHours(addDays(startOfDay(new Date()), 2), 14), 0)
  return {
    summary: "Appel client — Atelier Nord",
    start,
    end: addHours(start, 1),
    organizer: { name: "Léa Fontaine", email: "lea.fontaine@atelier-nord.fr" },
    attendees: [
      { name: "Camille Visiteur", email: "camille@demo.ulti" },
      { name: "Vincent Morel", email: "vincent.morel@gmail.com" },
      { name: "Thomas Giraud", email: "thomas.giraud@proton.me" },
    ],
    location: "UltiMeet",
    description:
      "Présentation UltiCal + intégration UltiMeet pour leur équipe.",
    conferenceProvider: "ultimeet",
  }
}

/** Aperçu statique d'une invitation détectée dans le mail — réutilise le composant réel. */
export function UlticalInvitationDemo() {
  const invitation = useMemo(buildDemoInvitation, [])

  return (
    <div className="flex flex-col gap-3">
      <div className="flex min-h-[22rem] items-center justify-center rounded-2xl bg-[var(--landing-chip)]/35 px-3 py-6 sm:min-h-[26rem] sm:px-4 sm:py-8">
        <CalendarInvitationPreview
          invitation={invitation}
          calendarAppName={ULTICAL_APP_NAME}
          className="w-full max-w-[520px] shadow-[0_24px_60px_-20px_rgba(30,40,90,0.35)]"
        />
      </div>
      <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
        <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
        Invitation détectée dans Ultimail — RSVP en un clic, rien n&apos;est envoyé.
      </p>
    </div>
  )
}