import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { HelpCircle, ChevronDown, Phone, MessageSquare, ExternalLink } from 'lucide-react';
import { TranslationSet } from '../types';

interface HelpPanelProps {
  isOpen: boolean;
  onClose: () => void;
  t: TranslationSet;
}

export default function HelpPanel({ isOpen, onClose, t }: HelpPanelProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  if (!isOpen) return null;

  const toggleIndex = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div id="help-overlay" className="fixed inset-0 z-50 flex items-center justify-end bg-black/50 backdrop-blur-xs font-sans">
      <motion.div
        id="help-drawer"
        initial={{ x: '100%' }}
        animate={{ x: 0 }}
        exit={{ x: '100%' }}
        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
        className="w-full max-w-lg h-full bg-white shadow-2xl flex flex-col justify-between"
      >
        {/* Header */}
        <div className="p-6 border-b border-neutral-100 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-xl bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-600">
              <HelpCircle className="w-5 h-5" />
            </div>
            <div>
              <h3 className="font-bold text-neutral-950 text-lg leading-tight">{t.helpModalTitle}</h3>
              <p className="text-xs text-neutral-400 font-mono mt-0.5">BROBIZZ HELP DESK</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-xs font-mono font-bold tracking-widest text-neutral-400 hover:text-neutral-900 border border-neutral-200 hover:border-neutral-950 px-3 py-1.5 rounded-xl transition duration-150 uppercase"
          >
            {t.helpClose}
          </button>
        </div>

        {/* FAQ Content */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          <div className="space-y-3">
            {t.faqs.map((faq, index) => {
              const isFaqOpen = openIndex === index;
              return (
                <div
                  key={index}
                  className="border border-neutral-200/60 rounded-2xl overflow-hidden transition-all duration-200"
                >
                  <button
                    onClick={() => toggleIndex(index)}
                    className="w-full flex items-center justify-between p-4 bg-neutral-50/50 hover:bg-neutral-50 text-left font-medium text-neutral-900 text-sm focus:outline-hidden"
                  >
                    <span className="pr-4">{faq.q}</span>
                    <ChevronDown
                      className={`w-4 h-4 text-neutral-400 shrink-0 transition-transform duration-200 ${
                        isFaqOpen ? 'rotate-180 text-neutral-950' : ''
                      }`}
                    />
                  </button>
                  <AnimatePresence initial={false}>
                    {isFaqOpen && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.2 }}
                        className="overflow-hidden"
                      >
                        <div className="p-4 bg-white border-t border-neutral-150/40 text-xs text-neutral-505 text-neutral-500 leading-relaxed">
                          {faq.a}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })}
          </div>

          {/* Additional Links */}
          <div className="p-5 bg-neutral-50/80 rounded-2xl border border-neutral-150/60 space-y-4 mt-8">
            <h4 className="font-bold text-neutral-950 text-sm">Brug for yderligere assistance?</h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              <a
                href="tel:+4570120121"
                className="flex items-center gap-2.5 p-3 rounded-xl bg-white border border-neutral-250/50 hover:border-neutral-400 hover:shadow-xs transition"
              >
                <Phone className="w-4 h-4 text-[#00965e]" />
                <div>
                  <div className="font-semibold text-neutral-900">Ring til support</div>
                  <div className="text-[10px] text-neutral-400 font-mono">+45 70 12 01 21</div>
                </div>
              </a>
              <div
                onClick={() => alert("Simuleret chat startes... Vores agenter er klar!")}
                className="flex items-center gap-2.5 p-3 rounded-xl bg-white border border-neutral-250/50 hover:border-neutral-400 hover:shadow-xs cursor-pointer transition"
              >
                <MessageSquare className="w-4 h-4 text-[#00965e]" />
                <div>
                  <div className="font-semibold text-neutral-900">Skriv til os</div>
                  <div className="text-[10px] text-neutral-400 font-mono">Live Chat (Aktiv)</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Support Message */}
        <div className="p-6 border-t border-neutral-100 bg-neutral-50/50 flex items-center justify-between text-[11px] text-neutral-400 font-mono">
          <span>BROBIZZ CUSTOMER SERVICE</span>
          <span className="flex items-center gap-1 hover:text-[#00965e] cursor-pointer">
            MINDRE VEJAFGIFTER <ExternalLink className="w-3 h-3" />
          </span>
        </div>
      </motion.div>
    </div>
  );
}