'use client';

import { useId, useState } from 'react';
import { BarChart3, Gauge, HandCoins, MousePointerClick, ShieldCheck } from 'lucide-react';

type FaqItem = { q: string; a: string };

export default function FaqTimelineAccordion(props: {
  title: string;
  subtitle?: string;
  faqs: FaqItem[];
  contentDir?: 'rtl' | 'ltr';
}) {
  const { title, subtitle, faqs, contentDir = 'rtl' } = props;
  const groupId = useId();
  const [openIndex, setOpenIndex] = useState<number>(0);

  return (
    <section className="mt-14 max-w-7xl">
      <div className="text-center mb-10">
        <h2 className="text-2xl sm:text-3xl font-bold text-[color:var(--text-primary)]">
          <span className="faq-title-bars">{title}</span>
        </h2>
        {subtitle ? <p className="mt-3 text-sm sm:text-base text-[color:var(--text-muted)]">{subtitle}</p> : null}
      </div>

      <div className="relative mx-auto" dir="ltr">
        <div className="hidden md:block absolute right-[132px] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#80c8f5]/35 to-transparent" />

        <div className="space-y-4">
          {faqs.map((f, idx) => {
            const Icon = [HandCoins, Gauge, ShieldCheck, MousePointerClick, BarChart3][idx % 5];
            const num = String(idx + 1).padStart(2, '0');
            const glow = ['#80c8f5', '#a78bfa', '#84e1bc', '#60a5fa', '#22d3ee'][idx % 5];
            const isOpen = openIndex === idx;
            const panelId = `${groupId}-panel-${idx}`;
            const buttonId = `${groupId}-btn-${idx}`;

            return (
              <div key={f.q} className="grid grid-cols-1 md:grid-cols-[1fr_220px] gap-5 items-stretch">
                <div
                  className={[
                    'relative rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-[color:var(--glass-04)]',
                    isOpen ? 'ring-1 ring-white/10' : '',
                  ].join(' ')}
                  dir={contentDir}
                >
                  <div className="absolute inset-0 pointer-events-none opacity-70">
                    <div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-transparent" />
                    <div className="absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent" />
                  </div>

                  <button
                    id={buttonId}
                    type="button"
                    aria-controls={panelId}
                    aria-expanded={isOpen}
                    onClick={() => setOpenIndex((cur) => (cur === idx ? -1 : idx))}
                    className="relative w-full px-6 py-5 text-inherit text-center focus:outline-none"
                  >
                    <div className="text-base sm:text-lg font-bold text-[color:var(--text-primary)]">{f.q}</div>

                    <div
                      id={panelId}
                      role="region"
                      aria-labelledby={buttonId}
                      className={[
                        'grid transition-[grid-template-rows,opacity] duration-300 ease-out',
                        isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70',
                      ].join(' ')}
                    >
                      <div className="overflow-hidden">
                        <div className="mt-3 text-sm text-[color:var(--text-muted)] leading-relaxed">{f.a}</div>
                      </div>
                    </div>
                  </button>
                </div>

                <div className="hidden md:flex items-center justify-end relative">
                  <span
                    className="absolute right-[132px] w-2 h-2 rounded-full"
                    style={{ backgroundColor: glow, boxShadow: `0 0 16px ${glow}aa` }}
                  />
                  <span
                    className="absolute right-[132px] h-px w-[44px]"
                    style={{ background: `linear-gradient(to left, ${glow}99, transparent)` }}
                  />

                  <div className="flex items-center gap-3 pr-2">
                    <div className="relative w-[66px] h-[66px] hex-clip gradient-border-anim bg-[color:var(--glass-04)]">
                      <div className="absolute inset-[1.5px] hex-clip bg-[color:var(--global-surface-bg-80)] border border-[color:var(--border-05)] flex items-center justify-center">
                        <Icon className="w-6 h-6" style={{ color: glow }} />
                      </div>
                    </div>

                    <span
                      className="h-px w-[18px]"
                      style={{ background: `linear-gradient(to left, ${glow}66, rgba(255,255,255,0.06))` }}
                    />

                    <div className="w-[62px] h-[62px] rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] flex items-center justify-center text-[color:var(--text-primary)] font-bold text-lg">
                      {num}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

