/**
 * Mawidi Demo Scheduler - Success Message Component
 * Displays booking confirmation with details and next steps
 */

"use client";

import React from "react";
import type { BookingData } from "../types/scheduler.types";
import {
  formatDateForDisplay,
  formatTimeForDisplay,
} from "../utils/dateHelpers";
import { formatDuration } from "../utils/timezoneHelpers";

export interface SuccessMessageProps {
  /** Complete booking data */
  bookingData: BookingData;
  /** Unique booking reference ID */
  bookingReference: string;
  /** Google Meet link (if available) */
  meetingLink?: string;
  /** Callback to add to calendar */
  onAddToCalendar?: () => void;
  /** Callback to book another session */
  onBookAnother?: () => void;
  /** Language for labels */
  language?: "en" | "ar";
  /** Custom className for styling */
  className?: string;
  /** Language direction */
  dir?: "ltr" | "rtl";
}

const successLabels = {
  en: {
    title: "Booking confirmed!",
    subtitle: "Your demo session has been successfully scheduled",
    referenceLabel: "Booking Reference",
    sessionDetailsTitle: "Session Details",
    dateLabel: "Date",
    timeLabel: "Time",
    durationLabel: "Duration",
    timezoneLabel: "Timezone",
    meetingLinkReady: "Your Google Meet link is ready!",
    joinGoogleMeet: "Join Google Meet",
    copyMeetLink: "Copy Meet Link",
    linkCopied: "Link copied!",
    nextStepsTitle: "What happens next?",
    step1: "Check your email for a confirmation message with the Meet link",
    step1NoLink: "Check your email for a confirmation message",
    step2: "Join the Google Meet session using the link above",
    step2NoLink: "You'll receive a calendar invite with the meeting link",
    step3: "We'll send a reminder 24 hours before your session",
    step4: "Join the meeting at the scheduled time",
    addToCalendar: "Add to Calendar",
    bookAnother: "Book Another Session",
    downloadICS: "Download .ics file",
    goToHome: "Go to Homepage",
  },
  ar: {
    title: "تم تأكيد الحجز!",
    subtitle: "تم جدولة جلسة العرض التوضيحي بنجاح",
    referenceLabel: "رقم الحجز",
    sessionDetailsTitle: "تفاصيل الجلسة",
    dateLabel: "التاريخ",
    timeLabel: "الوقت",
    durationLabel: "المدة",
    timezoneLabel: "المنطقة الزمنية",
    meetingLinkReady: "رابط Google Meet جاهز!",
    joinGoogleMeet: "الانضمام إلى Google Meet",
    copyMeetLink: "نسخ رابط الاجتماع",
    linkCopied: "تم نسخ الرابط!",
    nextStepsTitle: "ما هي الخطوات التالية؟",
    step1:
      "تحقق من بريدك الإلكتروني لرسالة التأكيد التي تحتوي على رابط الاجتماع",
    step1NoLink: "تحقق من بريدك الإلكتروني لرسالة التأكيد",
    step2: "انضم إلى جلسة Google Meet باستخدام الرابط أعلاه",
    step2NoLink: "ستتلقى دعوة تقويم تحتوي على رابط الاجتماع",
    step3: "سنرسل لك تذكيرًا قبل 24 ساعة من جلستك",
    step4: "انضم إلى الاجتماع في الوقت المحدد",
    addToCalendar: "إضافة إلى التقويم",
    bookAnother: "احجز جلسة أخرى",
    downloadICS: "تنزيل ملف .ics",
    goToHome: "الذهاب إلى الصفحة الرئيسية",
  },
};

/**
 * SuccessMessage Component
 *
 * Displays booking confirmation with animated checkmark, booking details,
 * and next steps for the user
 *
 * @example
 * ```tsx
 * <SuccessMessage
 *   bookingData={booking}
 *   bookingReference="BK-2024-001"
 *   onAddToCalendar={() => downloadICS()}
 *   onBookAnother={() => resetScheduler()}
 *   language="en"
 * />
 * ```
 */
export default function SuccessMessage({
  bookingData,
  bookingReference,
  meetingLink,
  onAddToCalendar,
  onBookAnother,
  language = "en",
  className = "",
  dir = "ltr",
}: SuccessMessageProps) {
  const labels = successLabels[language];
  const [linkCopied, setLinkCopied] = React.useState(false);

  // Copy Meet link to clipboard
  const handleCopyLink = async () => {
    if (meetingLink) {
      try {
        await navigator.clipboard.writeText(meetingLink);
        setLinkCopied(true);
        setTimeout(() => setLinkCopied(false), 2000);
      } catch (error) {
        console.error("Failed to copy link:", error);
      }
    }
  };

  return (
    <div className={`space-y-8 ${className}`} dir={dir}>
      {/* Success animation and title - Editorial style */}
      <div className="flex flex-col items-center text-center space-y-6">
        {/* Animated checkmark - Simple editorial style */}
        <div className="relative w-20 h-20 bg-[#10B981] flex items-center justify-center">
          <svg
            className="w-10 h-10 text-white"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={3}
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>

        {/* Title and subtitle */}
        <div className="space-y-2">
          <h2 className="text-3xl font-bold text-[#1E293B] dark:text-white">
            {labels.title}
          </h2>
          <p className="text-lg text-[#64748B] dark:text-slate-400">
            {labels.subtitle}
          </p>
        </div>

        {/* Booking reference - Editorial style */}
        <div className="inline-flex items-center gap-3 px-4 py-3 bg-[#FAFAFA] dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
          <span className="text-sm text-[#64748B] dark:text-slate-400">
            {labels.referenceLabel}:
          </span>
          <span className="text-sm font-bold text-[#1E293B] dark:text-white font-mono">
            {bookingReference}
          </span>
        </div>
      </div>

      {/* Session details card - Editorial grid style */}
      <div className="border border-slate-200 dark:border-slate-700">
        <div className="p-4 bg-[#FAFAFA] dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700">
          <h3 className="text-sm font-semibold text-[#1E293B] dark:text-white uppercase tracking-wider">
            {labels.sessionDetailsTitle}
          </h3>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-slate-200 dark:bg-slate-700">
          {/* Date */}
          <div className="flex items-start gap-3 p-4 bg-white dark:bg-slate-900">
            <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
            <div>
              <p className="text-xs text-[#64748B] dark:text-slate-500">
                {labels.dateLabel}
              </p>
              <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                {formatDateForDisplay(bookingData.selectedDate, language)}
              </p>
            </div>
          </div>

          {/* Time */}
          <div className="flex items-start gap-3 p-4 bg-white dark:bg-slate-900">
            <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
            <div>
              <p className="text-xs text-[#64748B] dark:text-slate-500">
                {labels.timeLabel}
              </p>
              <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                {formatTimeForDisplay(bookingData.selectedTime, language)}
              </p>
            </div>
          </div>

          {/* Duration */}
          <div className="flex items-start gap-3 p-4 bg-white dark:bg-slate-900">
            <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
            <div>
              <p className="text-xs text-[#64748B] dark:text-slate-500">
                {labels.durationLabel}
              </p>
              <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                {formatDuration(bookingData.meetingDuration, language)}
              </p>
            </div>
          </div>

          {/* Timezone */}
          <div className="flex items-start gap-3 p-4 bg-white dark:bg-slate-900">
            <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
            <div>
              <p className="text-xs text-[#64748B] dark:text-slate-500">
                {labels.timezoneLabel}
              </p>
              <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                {bookingData.timezone} (UTC+3)
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Google Meet Link (if available) - Editorial style */}
      {meetingLink && (
        <div className="border border-[#10B981]/30 bg-[#10B981]/5 dark:bg-[#10B981]/10">
          <div className="p-4 flex items-center gap-3 border-b border-[#10B981]/20">
            <div className="w-1.5 h-1.5 bg-[#10B981]" />
            <h3 className="text-sm font-semibold text-[#10B981] uppercase tracking-wider">
              {labels.meetingLinkReady}
            </h3>
          </div>

          <div className="p-4 space-y-4">
            <div className="flex flex-col sm:flex-row gap-3">
              {/* Primary button - Green with fill-up effect */}
              <a
                href={meetingLink}
                target="_blank"
                rel="noopener noreferrer"
                className="
                  group
                  relative
                  flex-1
                  flex
                  items-center
                  justify-center
                  gap-2
                  px-6
                  py-3
                  bg-[#10B981]
                  text-white
                  font-semibold
                  overflow-hidden
                  transition-colors duration-200
                  hover:bg-[#059669]
                  focus:outline-none
                  focus:ring-2
                  focus:ring-[#10B981]/50
                "
              >
                <svg
                  className="w-5 h-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                  />
                </svg>
                {labels.joinGoogleMeet}
              </a>

              {/* Secondary button - Outline */}
              <button
                onClick={handleCopyLink}
                className="
                  flex
                  items-center
                  justify-center
                  gap-2
                  px-6
                  py-3
                  border
                  border-[#10B981]
                  bg-white
                  dark:bg-slate-900
                  text-[#10B981]
                  font-semibold
                  transition-colors duration-200
                  hover:bg-[#10B981]/10
                  focus:outline-none
                  focus:ring-2
                  focus:ring-[#10B981]/30
                "
              >
                {linkCopied ? (
                  <>
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                    {labels.linkCopied}
                  </>
                ) : (
                  <>
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                      />
                    </svg>
                    {labels.copyMeetLink}
                  </>
                )}
              </button>
            </div>

            <p className="text-xs text-[#64748B] dark:text-slate-500 break-all font-mono">
              {meetingLink}
            </p>
          </div>
        </div>
      )}

      {/* Next steps - Editorial style */}
      <div className="border border-[#10B981]/20 bg-[#10B981]/5 dark:bg-[#10B981]/10">
        <div className="p-4 flex items-center gap-3 border-b border-[#10B981]/20">
          <div className="w-1.5 h-1.5 bg-[#10B981]" />
          <h3 className="text-sm font-semibold text-[#1E293B] dark:text-white uppercase tracking-wider">
            {labels.nextStepsTitle}
          </h3>
        </div>

        <div className="p-4">
          <ol className="space-y-4">
            {[
              meetingLink ? labels.step1 : labels.step1NoLink,
              meetingLink ? labels.step2 : labels.step2NoLink,
              labels.step3,
              labels.step4,
            ].map((step, index) => (
              <li key={index} className="flex items-start gap-3">
                <span
                  className="text-[#10B981] font-mono text-xs mt-0.5"
                  dir="ltr"
                >
                  {String(index + 1).padStart(2, "0")}
                </span>
                <p className="text-sm text-[#64748B] dark:text-slate-400">
                  {step}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </div>

      {/* Action buttons - Editorial style */}
      <div className="flex flex-col sm:flex-row gap-px bg-slate-200 dark:bg-slate-700">
        {onAddToCalendar && (
          <button
            onClick={onAddToCalendar}
            className="
              flex-1
              flex
              items-center
              justify-center
              gap-2
              px-6
              py-4
              bg-[#10B981]
              text-white
              font-semibold
              transition-colors duration-200
              hover:bg-[#059669]
              focus:outline-none
              focus:ring-2
              focus:ring-[#10B981]/50
              focus:ring-inset
            "
          >
            <svg
              className="w-5 h-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 4v16m8-8H4"
              />
            </svg>
            {labels.addToCalendar}
          </button>
        )}

        {onBookAnother && (
          <button
            onClick={onBookAnother}
            className="
              flex-1
              flex
              items-center
              justify-center
              gap-2
              px-6
              py-4
              bg-white
              dark:bg-slate-900
              text-[#1E293B]
              dark:text-white
              font-semibold
              transition-colors duration-200
              hover:bg-[#FAFAFA]
              dark:hover:bg-slate-800
              focus:outline-none
              focus:ring-2
              focus:ring-[#10B981]/30
              focus:ring-inset
            "
          >
            <svg
              className="w-5 h-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              />
            </svg>
            {labels.bookAnother}
          </button>
        )}
      </div>

      {/* Support info - Editorial style */}
      <div className="flex items-start gap-3 p-4 bg-[#FAFAFA] dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
        <div className="w-1 h-1 bg-[#64748B] dark:bg-slate-500 mt-2 flex-shrink-0" />
        <p className="text-xs text-[#64748B] dark:text-slate-400">
          {language === "ar"
            ? "هل لديك أسئلة؟ تواصل معنا على support@mawidi.com أو اتصل بنا على الرقم +966 50 123 4567"
            : "Questions? Contact us at support@mawidi.com or call +966 50 123 4567"}
        </p>
      </div>
    </div>
  );
}
