/**
 * Mawidi Demo Scheduler - Duration Selector Component
 * Editorial Design System - Magazine-style duration cards
 */

"use client";

import React, { useState, useEffect } from "react";

export interface DurationSelectorProps {
  /** Currently selected duration */
  selectedDuration: 30 | 60 | null;
  /** Callback when duration is selected */
  onSelect: (duration: 30 | 60) => void;
  /** Available durations to choose from */
  durations?: (30 | 60)[];
  /** Language for labels */
  language?: "en" | "ar";
  /** Custom className for styling */
  className?: string;
  /** Language direction */
  dir?: "ltr" | "rtl";
}

const durationContent = {
  en: {
    title: "Select meeting duration",
    description: "Choose how long you'd like your demo to be",
    options: {
      30: { label: "30 minutes", subtitle: "Quick overview of key features" },
      60: { label: "60 minutes", subtitle: "Full demo with Q&A session" },
    },
    selectedHint:
      "You've selected a {duration} session. You can change this anytime.",
  },
  ar: {
    title: "اختر مدة الاجتماع",
    description: "اختر المدة التي تريدها للعرض التوضيحي",
    options: {
      30: { label: "٣٠ دقيقة", subtitle: "نظرة سريعة على الميزات الرئيسية" },
      60: { label: "٦٠ دقيقة", subtitle: "عرض كامل مع جلسة أسئلة وأجوبة" },
    },
    selectedHint:
      "لقد اخترت جلسة مدتها {duration}. يمكنك تغيير المدة في أي وقت.",
  },
};

// Stable default durations array to prevent re-renders
const DEFAULT_DURATIONS = [30, 60] as const;

/**
 * DurationSelector Component
 *
 * Editorial-style duration selection with numbered cards
 * Supports bilingual labels and RTL layouts
 */
export default function DurationSelector({
  selectedDuration,
  onSelect,
  durations = DEFAULT_DURATIONS as unknown as (30 | 60)[],
  language = "en",
  className = "",
  dir = "ltr",
}: DurationSelectorProps) {
  const t = durationContent[language];

  // Fix hydration errors by only rendering selected state after mount
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

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

      {/* Editorial Grid with thin line separators */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-slate-200 dark:bg-slate-700">
        {durations.map((duration, idx) => {
          const isSelected = mounted && selectedDuration === duration;
          const option = t.options[duration];

          return (
            <button
              key={duration}
              onClick={() => onSelect(duration)}
              className={`
                group
                relative
                bg-white dark:bg-slate-900
                p-6 sm:p-8
                text-left
                transition-all duration-200
                ${
                  isSelected
                    ? "ring-2 ring-[#10B981] ring-inset"
                    : "hover:bg-[#FAFAFA] dark:hover:bg-slate-800"
                }
              `}
              aria-pressed={isSelected}
              aria-label={`Select ${option.label}`}
            >
              {/* Step number - editorial style */}
              <span
                className="text-[#10B981] font-mono text-xs mb-3 block"
                dir="ltr"
              >
                {String(idx + 1).padStart(2, "0")}
              </span>

              {/* Duration display */}
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1">
                  <h4
                    className={`
                      text-2xl font-bold mb-2 transition-colors
                      ${
                        isSelected
                          ? "text-[#10B981]"
                          : "text-[#1E293B] dark:text-white group-hover:text-[#10B981]"
                      }
                    `}
                  >
                    {option.label}
                  </h4>
                  <p className="text-sm text-[#64748B] dark:text-slate-400">
                    {option.subtitle}
                  </p>
                </div>

                {/* Selection indicator */}
                {isSelected && (
                  <div className="w-6 h-6 rounded-full bg-[#10B981] flex items-center justify-center flex-shrink-0">
                    <svg
                      className="w-4 h-4 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  </div>
                )}
              </div>

              {/* Expanding underline hover animation */}
              <div
                className={`
                  mt-6 h-0.5 transition-all duration-300
                  ${
                    isSelected
                      ? "w-12 bg-[#10B981]"
                      : "w-0 group-hover:w-12 bg-[#10B981]"
                  }
                `}
              />
            </button>
          );
        })}
      </div>

      {/* Helper text for selected duration */}
      {mounted && selectedDuration && (
        <div className="flex items-start gap-3 p-4 bg-[#10B981]/5 dark:bg-[#10B981]/10 border border-[#10B981]/20 rounded-lg">
          <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">
            {t.selectedHint.replace(
              "{duration}",
              t.options[selectedDuration].label,
            )}
          </p>
        </div>
      )}
    </div>
  );
}
