/**
 * Mawidi Demo Scheduler - Confirmation Step Component
 * Displays booking summary for final confirmation
 */

"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 ConfirmationStepProps {
  /** Complete booking data to confirm */
  bookingData: BookingData;
  /** Language for labels */
  language?: "en" | "ar";
  /** Custom className for styling */
  className?: string;
  /** Language direction */
  dir?: "ltr" | "rtl";
}

const confirmationLabels = {
  en: {
    title: "Confirm your booking",
    description: "Please review your booking details",
    duration: "Duration",
    dateTime: "Date & Time",
    date: "Date",
    time: "Time",
    timezone: "Timezone",
    contactInfo: "Contact Information",
    name: "Name",
    email: "Email",
    phone: "Phone",
    message: "Message",
    edit: "Edit",
    editDuration: "Edit duration",
    editDate: "Edit date & time",
    editInfo: "Edit information",
  },
  ar: {
    title: "تأكيد الحجز",
    description: "يرجى مراجعة تفاصيل حجزك",
    duration: "المدة",
    dateTime: "التاريخ والوقت",
    date: "التاريخ",
    time: "الوقت",
    timezone: "المنطقة الزمنية",
    contactInfo: "معلومات الاتصال",
    name: "الاسم",
    email: "البريد الإلكتروني",
    phone: "الهاتف",
    message: "الرسالة",
    edit: "تعديل",
    editDuration: "تعديل المدة",
    editDate: "تعديل التاريخ والوقت",
    editInfo: "تعديل المعلومات",
  },
};

/**
 * ConfirmationStep Component
 *
 * Displays a summary of all booking details for final confirmation
 * Shows duration, date/time, and contact information in organized sections
 *
 * @example
 * ```tsx
 * <ConfirmationStep
 *   bookingData={{
 *     duration: 30,
 *     selectedDate: new Date(),
 *     selectedTime: "14:00",
 *     userInfo: { name: "John Doe", email: "john@example.com" }
 *   }}
 *   language="en"
 * />
 * ```
 */
export default function ConfirmationStep({
  bookingData,
  language = "en",
  className = "",
  dir = "ltr",
}: ConfirmationStepProps) {
  const labels = confirmationLabels[language];

  return (
    <div className={`space-y-6 ${className}`} dir={dir}>
      {/* Editorial Title and description */}
      <div className="space-y-2">
        <h3 className="text-xl font-semibold text-[#1E293B] dark:text-white">
          {labels.title}
        </h3>
        <p className="text-sm text-[#64748B] dark:text-slate-400">
          {labels.description}
        </p>
      </div>

      {/* Summary sections - Editorial grid style */}
      <div className="space-y-px bg-slate-200 dark:bg-slate-700">
        {/* Duration section */}
        <div className="p-6 bg-white dark:bg-slate-900">
          <div className="flex items-start gap-4">
            <span className="text-[#10B981] font-mono text-xs mt-1" dir="ltr">
              01
            </span>
            <div className="flex-1">
              <p className="text-xs font-medium text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1">
                {labels.duration}
              </p>
              <p className="text-lg font-semibold text-[#1E293B] dark:text-white">
                {formatDuration(bookingData.meetingDuration, language)}
              </p>
            </div>
          </div>
        </div>

        {/* Date & Time section */}
        <div className="p-6 bg-white dark:bg-slate-900">
          <div className="flex items-start gap-4">
            <span className="text-[#10B981] font-mono text-xs mt-1" dir="ltr">
              02
            </span>
            <div className="flex-1">
              <p className="text-xs font-medium text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-2">
                {labels.dateTime}
              </p>
              <div className="space-y-1">
                <p className="text-lg font-semibold text-[#1E293B] dark:text-white">
                  {formatDateForDisplay(bookingData.selectedDate, language)}
                </p>
                <p className="text-base text-[#64748B] dark:text-slate-300">
                  {formatTimeForDisplay(bookingData.selectedTime, language)}
                </p>
                <p className="text-xs text-[#64748B] dark:text-slate-500 flex items-center gap-2">
                  <div className="w-1 h-1 bg-[#64748B] dark:bg-slate-500" />
                  {bookingData.timezone} (UTC+3)
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Contact Information section */}
        <div className="p-6 bg-white dark:bg-slate-900">
          <div className="flex items-start gap-4">
            <span className="text-[#10B981] font-mono text-xs mt-1" dir="ltr">
              03
            </span>
            <div className="flex-1">
              <p className="text-xs font-medium text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-4">
                {labels.contactInfo}
              </p>
              <div className="space-y-4">
                {/* Name */}
                <div className="flex items-start gap-3">
                  <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.name}
                    </p>
                    <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                      {bookingData.userInfo.name}
                    </p>
                  </div>
                </div>

                {/* Email */}
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                  <div className="min-w-0 flex-1">
                    <p className="text-xs text-[#64748B] dark:text-slate-500">
                      {labels.email}
                    </p>
                    <p className="text-sm font-medium text-[#1E293B] dark:text-white break-all">
                      {bookingData.userInfo.email}
                    </p>
                  </div>
                </div>

                {/* Phone (if provided) */}
                {bookingData.userInfo.phone && (
                  <div className="flex items-start gap-3">
                    <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.phone}
                      </p>
                      <p className="text-sm font-medium text-[#1E293B] dark:text-white">
                        {bookingData.userInfo.phone}
                      </p>
                    </div>
                  </div>
                )}

                {/* Message */}
                <div className="pt-4 border-t border-slate-200 dark:border-slate-700">
                  <div className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#64748B] dark:bg-slate-500 mt-2 flex-shrink-0" />
                    <div className="min-w-0 flex-1">
                      <p className="text-xs text-[#64748B] dark:text-slate-500 mb-1">
                        {labels.message}
                      </p>
                      <p className="text-sm text-[#64748B] dark:text-slate-400 whitespace-pre-wrap">
                        {bookingData.userInfo.message}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Confirmation notice - Editorial style */}
      <div className="flex items-start gap-3 p-4 bg-[#10B981]/5 dark:bg-[#10B981]/10 border border-[#10B981]/20">
        <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
        <p className="text-sm text-[#1E293B] dark:text-slate-200">
          {language === "ar"
            ? "سنرسل لك رسالة تأكيد عبر البريد الإلكتروني مع رابط الاجتماع."
            : "We'll send you a confirmation email with the meeting link."}
        </p>
      </div>
    </div>
  );
}
