import { useState, useEffect, useRef } from "react";
import { Eye, EyeOff, ChevronDown, Puzzle, RefreshCw, Shield, CreditCard, Code2, Cookie, BarChart3, Mail, AlertTriangle, Clock, Check } from "lucide-react";
import { useTranslation } from 'react-i18next';

const iconMap = {
  setup: CreditCard, theme: Code2, plugin: Puzzle, hosting: BarChart3,
  maintenance: RefreshCw, conflict: AlertTriangle, security: Shield,
  change: Clock, cookie: Cookie, analytics: BarChart3, email: Mail, dev: Code2,
};

const severityColor = {
  1: "border-yellow-500/40 bg-yellow-500/5",
  2: "border-orange-500/40 bg-orange-500/5",
  3: "border-red-500/40 bg-red-500/5",
};
const severityDot = { 1: "bg-yellow-500", 2: "bg-orange-500", 3: "bg-red-500" };

export default function CostIceberg() {
  const [revealed, setRevealed] = useState(false);
  const [visibleCount, setVisibleCount] = useState(0);
  const sectionRef = useRef(null);
  const { t } = useTranslation();

  useEffect(() => {
    if (!revealed) { setVisibleCount(0); return; }
    let i = 0;
    const hiddenItems = t('iceberg.hidden', { returnObjects: true });
    const interval = setInterval(() => {
      i++;
      setVisibleCount(i);
      if (i >= hiddenItems.length) clearInterval(interval);
    }, 120);
    return () => clearInterval(interval);
  }, [revealed, t]);

  const tipItems = t('iceberg.tip', { returnObjects: true });
  const hiddenItems = t('iceberg.hidden', { returnObjects: true });
  const ahojsvetPoints = t('iceberg.ahojsvet.points', { returnObjects: true });

  return (
    <section ref={sectionRef} className="py-20 md:py-32 text-white" style={{ background: "#111827" }}>
      <div className="max-w-6xl mx-auto px-4 md:px-6">
        {/* Header */}
        <div className="text-center mb-16 md:mb-20">
          <h2 className="text-4xl md:text-6xl font-black mb-4" style={{ fontFamily: "'Work Sans', sans-serif" }}>
            {t('iceberg.title')}
          </h2>
          <p className="text-lg md:text-2xl font-medium" style={{ color: "#f87171" }}>
            {t('iceberg.subtitle')}
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8 md:gap-12 items-start">
          {/* WordPress Iceberg */}
          <div>
            {/* Tip */}
            <div className="mb-2">
              <div className="flex items-center gap-2 mb-4">
                <Eye size={18} style={{ color: "#9ca3af" }} />
                <span className="text-sm font-bold uppercase tracking-wider" style={{ color: "#9ca3af" }}>
                  {t('iceberg.tipLabel')}
                </span>
              </div>
              <div className="space-y-3">
                {tipItems.map((item, i) => {
                  const Icon = iconMap[item.icon];
                  return (
                    <div key={i} className="rounded-xl p-4 md:p-5 border flex items-start gap-4"
                      style={{ background: "#1f2937", borderColor: "#374151" }}>
                      <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ background: "#374151" }}>
                        <Icon size={20} style={{ color: "#9ca3af" }} />
                      </div>
                      <div>
                        <div className="font-bold">{item.label}</div>
                        <div className="text-sm" style={{ color: "#9ca3af" }}>{item.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Waterline + Reveal Button */}
            <div className="relative my-6">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t-2 border-dashed" style={{ borderColor: "#3b82f6", opacity: 0.4 }} />
              </div>
              <div className="relative flex justify-center">
                <button
                  onClick={() => setRevealed(!revealed)}
                  className="flex items-center gap-2 px-5 py-2.5 rounded-full font-bold text-sm transition-all"
                  style={{
                    background: revealed ? "#1f2937" : "#b91c1c",
                    color: "#fff",
                    boxShadow: revealed ? "none" : "0 0 30px rgba(185,28,28,0.4)",
                  }}
                >
                  {revealed ? <EyeOff size={16} /> : <ChevronDown size={16} />}
                  {revealed ? t('iceberg.hideBtn') : t('iceberg.revealBtn')}
                </button>
              </div>
            </div>

            {/* Hidden Costs */}
            <div style={{
              maxHeight: revealed ? "2000px" : "0px",
              opacity: revealed ? 1 : 0,
              overflow: "hidden",
              transition: "max-height 0.8s ease, opacity 0.5s ease",
            }}>
              <div className="flex items-center gap-2 mb-4">
                <EyeOff size={18} style={{ color: "#ef4444" }} />
                <span className="text-sm font-bold uppercase tracking-wider" style={{ color: "#ef4444" }}>
                  {t('iceberg.hiddenLabel')}
                </span>
              </div>
              <div className="space-y-3">
                {hiddenItems.map((item, i) => {
                  const Icon = iconMap[item.icon];
                  const visible = i < visibleCount;
                  return (
                    <div
                      key={i}
                      className={`rounded-xl p-4 md:p-5 border flex items-start gap-4 ${severityColor[item.severity]}`}
                      style={{
                        opacity: visible ? 1 : 0,
                        transform: visible ? "translateY(0)" : "translateY(12px)",
                        transition: "opacity 0.35s ease, transform 0.35s ease",
                      }}
                    >
                      <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ background: "rgba(255,255,255,0.05)" }}>
                        <Icon size={20} style={{ color: "#f87171" }} />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-0.5">
                          <span className="font-bold">{item.label}</span>
                          <span className={`w-2 h-2 rounded-full ${severityDot[item.severity]}`} />
                        </div>
                        <div className="text-sm" style={{ color: "#9ca3af" }}>{item.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Summary */}
              {visibleCount >= hiddenItems.length && (
                <div className="mt-6 rounded-xl p-5 border text-center"
                  style={{
                    borderColor: "#ef4444",
                    background: "rgba(239,68,68,0.08)",
                    animation: "fadeIn 0.5s ease",
                  }}>
                  <div className="text-2xl md:text-3xl font-black" style={{ color: "#ef4444" }}>
                    10+ skrytých nákladov
                  </div>
                  <div className="text-sm mt-1" style={{ color: "#9ca3af" }}>
                    ...a to sme ešte nezačali riešiť škálovanie.
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* AhojSvet - Clean Side */}
          <div className="lg:sticky lg:top-32">
            <div className="rounded-2xl p-6 md:p-8 border-4" style={{ background: "#f0fdf4", borderColor: "#16a34a" }}>
              <div className="text-center mb-8">
                <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-bold mb-4"
                  style={{ background: "#16a34a", color: "#fff" }}>
                  Bez prekvapení
                </div>
                <h3 className="text-3xl font-black" style={{ color: "#111827" }}>{t('iceberg.ahojsvet.title')}</h3>
                <p className="text-base mt-1" style={{ color: "#6b7280" }}>{t('iceberg.ahojsvet.subtitle')}</p>
              </div>
              <div className="space-y-5">
                {ahojsvetPoints.map((p, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                      style={{ background: "#16a34a" }}>
                      <Check size={14} color="#fff" strokeWidth={3} />
                    </div>
                    <div>
                      <div className="font-bold" style={{ color: "#111827" }}>{p.label}</div>
                      <div className="text-sm" style={{ color: "#6b7280" }}>{p.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-8 text-center">
                <a href="#contact"
                  className="inline-block px-8 py-4 rounded-xl font-bold text-lg transition-all"
                  style={{
                    background: "#b91c1c", color: "#fff",
                    boxShadow: "0 0 40px rgba(185,28,28,0.3)",
                  }}>
                  {t('iceberg.ahojsvet.cta')}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </section>
  );
}