"use client";

import { useLanguage } from "@/contexts/LanguageContext";
import Link from "next/link";
import { localizedPath } from "@/lib/localized-path";

type ReleaseType = "launch" | "major" | "improvement" | "security" | "fix";

interface Release {
  version: string;
  date: string;
  type: ReleaseType;
  section: "past" | "recent";
  key: string;
  items: string[];
}

const RELEASES: Release[] = [
  { version: "2.86", date: "2026-06-28", type: "major",       section: "recent", key: "v286", items: ["i1","i2","i3"] },
  { version: "2.85", date: "2026-06-21", type: "improvement", section: "recent", key: "v285", items: ["i1","i2","i3"] },
  { version: "2.84", date: "2026-06-14", type: "improvement", section: "recent", key: "v284", items: ["i1","i2","i3"] },
  { version: "2.83", date: "2026-06-07", type: "major",       section: "recent", key: "v283", items: ["i1","i2","i3"] },
  { version: "2.82", date: "2026-05-31", type: "improvement", section: "recent", key: "v282", items: ["i1","i2","i3"] },
  { version: "2.81", date: "2026-05-24", type: "improvement", section: "recent", key: "v281", items: ["i1","i2","i3"] },
  { version: "2.80", date: "2026-05-17", type: "major",       section: "recent", key: "v280", items: ["i1","i2","i3"] },
  { version: "2.79", date: "2026-05-10", type: "major",       section: "recent", key: "v279", items: ["i1","i2","i3"] },
  { version: "2.78", date: "2026-05-03", type: "improvement", section: "recent", key: "v278", items: ["i1","i2","i3"] },
  { version: "2.77", date: "2026-04-26", type: "major",       section: "recent", key: "v277", items: ["i1","i2","i3"] },
  { version: "2.76", date: "2026-04-19", type: "improvement", section: "recent", key: "v276", items: ["i1","i2","i3"] },
  { version: "2.75", date: "2026-04-12", type: "improvement", section: "recent", key: "v275", items: ["i1","i2","i3"] },
  { version: "2.74", date: "2026-04-05", type: "major",       section: "recent", key: "v274", items: ["i1","i2","i3"] },
  { version: "2.73", date: "2026-03-29", type: "major",       section: "recent", key: "v273", items: ["i1","i2","i3"] },
  { version: "2.72", date: "2026-03-22", type: "improvement", section: "recent", key: "v272", items: ["i1","i2","i3"] },
  { version: "2.71", date: "2026-03-15", type: "major",       section: "recent", key: "v271", items: ["i1","i2","i3"] },
  { version: "2.7",  date: "2026-03-08", type: "major",       section: "past",   key: "v27",  items: ["i1","i2","i3","i4","i5"] },
  { version: "2.6",  date: "2026-03-01", type: "major",       section: "past",   key: "v26",  items: ["i1","i2","i3","i4"] },
  { version: "2.5",  date: "2026-01-20", type: "security",    section: "past",   key: "v25",  items: ["i1","i2","i3"] },
  { version: "2.4",  date: "2025-12-10", type: "major",       section: "past",   key: "v24",  items: ["i1","i2","i3","i4"] },
  { version: "2.3",  date: "2025-11-05", type: "improvement", section: "past",   key: "v23",  items: ["i1","i2","i3"] },
  { version: "2.2",  date: "2025-09-15", type: "major",       section: "past",   key: "v22",  items: ["i1","i2","i3","i4","i5"] },
  { version: "2.0",  date: "2025-07-01", type: "launch",      section: "past",   key: "v20",  items: ["i1","i2","i3","i4"] },
  { version: "1.8",  date: "2025-05-10", type: "major",       section: "past",   key: "v18",  items: ["i1","i2","i3","i4"] },
  { version: "1.6",  date: "2025-03-22", type: "major",       section: "past",   key: "v16",  items: ["i1","i2","i3","i4"] },
  { version: "1.4",  date: "2025-02-08", type: "improvement", section: "past",   key: "v14",  items: ["i1","i2","i3"] },
  { version: "1.0",  date: "2025-01-03", type: "launch",      section: "past",   key: "v10",  items: ["i1","i2","i3","i4"] },
];

const TYPE_COLOR: Record<ReleaseType, string> = {
  launch:      "#a78bfa",
  major:       "#818cf8",
  improvement: "#10B981",
  security:    "#EF4444",
  fix:         "#F59E0B",
};

export default function ChangelogArea() {
  const { t, language } = useLanguage();
  const isAr = language === "ar";

  const formatDate = (iso: string) =>
    new Date(iso).toLocaleDateString(isAr ? "ar-SA" : "en-US", {
      year: "numeric", month: "long", day: "numeric",
    });

  const recent = RELEASES.filter((r) => r.section === "recent");
  const past   = RELEASES.filter((r) => r.section === "past");

  const renderTimeline = (releases: Release[]) => (
    <div style={{
      maxWidth: 760,
      margin: "0 auto",
      position: "relative",
      paddingTop: 8,
    }}>
      {/* vertical line */}
      <div style={{
        position: "absolute",
        left: isAr ? "auto" : 19,
        right: isAr ? 19 : "auto",
        top: 0,
        bottom: 0,
        width: 1,
        background: "linear-gradient(to bottom, rgba(129,140,248,.4) 0%, rgba(255,255,255,.04) 100%)",
        pointerEvents: "none",
      }} />

      {releases.map((r) => {
        const color = TYPE_COLOR[r.type];
        return (
          <div
            key={r.version}
            data-aos="fade-up"
            style={{
              paddingLeft:  isAr ? 0 : 54,
              paddingRight: isAr ? 54 : 0,
              marginBottom: 36,
              position: "relative",
            }}
          >
            {/* dot */}
            <div style={{
              position: "absolute",
              left:  isAr ? "auto" : 12,
              right: isAr ? 12 : "auto",
              top: 6,
              width: 16,
              height: 16,
              borderRadius: "50%",
              background: color,
              border: "2px solid #080c14",
              boxShadow: `0 0 0 3px ${color}30`,
              zIndex: 1,
            }} />

            {/* header row */}
            <div style={{
              display: "flex",
              alignItems: "center",
              flexWrap: "wrap",
              gap: 10,
              marginBottom: 10,
              flexDirection: isAr ? "row-reverse" : "row",
            }}>
              <span style={{
                fontSize: 20,
                fontWeight: 800,
                fontFamily: "monospace",
                color: "#fff",
                letterSpacing: "-0.5px",
              }}>
                v{r.version}
              </span>
              <span style={{
                padding: "3px 10px",
                borderRadius: 6,
                fontSize: 11,
                fontWeight: 700,
                textTransform: "uppercase",
                letterSpacing: "0.5px",
                color,
                background: `${color}18`,
                border: `1px solid ${color}35`,
              }}>
                {t(`cl.type.${r.type}`)}
              </span>
              <span style={{
                fontSize: 12,
                color: "#64748b",
                marginLeft: isAr ? 0 : "auto",
                marginRight: isAr ? "auto" : 0,
              }}>
                {formatDate(r.date)}
              </span>
            </div>

            {/* card */}
            <div style={{
              background: "rgba(255,255,255,0.025)",
              border: "1px solid rgba(255,255,255,0.06)",
              borderRadius: 14,
              padding: "20px 22px",
            }}>
              <div style={{
                fontSize: 15,
                fontWeight: 700,
                color: "#e2e8f0",
                marginBottom: 14,
                lineHeight: 1.45,
                textAlign: isAr ? "right" : "left",
              }}>
                {t(`cl.${r.key}.title`)}
              </div>

              <ul style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "flex",
                flexDirection: "column",
                gap: 9,
              }}>
                {r.items.map((ik) => (
                  <li key={ik} style={{
                    display: "flex",
                    alignItems: "flex-start",
                    gap: 10,
                    fontSize: 13.5,
                    color: "#94a3b8",
                    lineHeight: 1.6,
                    flexDirection: isAr ? "row-reverse" : "row",
                    textAlign: isAr ? "right" : "left",
                  }}>
                    <span style={{
                      flexShrink: 0,
                      marginTop: 3,
                      width: 18,
                      height: 18,
                      borderRadius: 5,
                      background: `${color}18`,
                      color,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                    }}>
                      <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                        <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                    {t(`cl.${r.key}.${ik}`)}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        );
      })}
    </div>
  );

  return (
    <section style={{
      background: "#000000",
      minHeight: "100vh",
      padding: "120px 0 100px",
      color: "#fff",
    }}>
      {/* pulse keyframes */}
      <style>{`@keyframes cl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}`}</style>

      <div className="container">

        {/* ── Hero ── */}
        <div data-aos="fade-up" style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "6px 16px",
            background: "rgba(102,16,242,0.12)",
            border: "1px solid rgba(102,16,242,0.3)",
            borderRadius: 20,
            fontSize: 13,
            fontWeight: 500,
            color: "#a78bfa",
            textTransform: "uppercase",
            letterSpacing: "0.5px",
            marginBottom: 24,
          }}>
            <span style={{
              width: 7, height: 7,
              background: "#10b981",
              borderRadius: "50%",
              animation: "cl-pulse 2s ease-in-out infinite",
              display: "inline-block",
            }} />
            {t("cl.badge")}
          </div>

          <h1 style={{
            fontSize: "clamp(36px, 5vw, 56px)",
            fontWeight: 800,
            letterSpacing: "-1.5px",
            lineHeight: 1.1,
            marginBottom: 18,
            color: "#fff",
          }}>
            {t("cl.heroLine1")}{" "}
            <span style={{
              background: "linear-gradient(135deg, #6610f2, #a78bfa)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
            }}>
              {t("cl.heroLine2")}
            </span>
          </h1>

          <p style={{
            fontSize: 17,
            color: "#94a3b8",
            maxWidth: 560,
            margin: "0 auto",
            lineHeight: 1.7,
          }}>
            {t("cl.heroSub")}
          </p>
        </div>

        {/* ── Recent section header ── */}
        <div data-aos="fade-up" style={{
          display: "flex",
          alignItems: "center",
          gap: 16,
          marginBottom: 40,
          marginTop: 24,
        }}>
          <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
          <span style={{
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: "#64748b",
            whiteSpace: "nowrap",
          }}>
            {t("cl.section.recent")}
          </span>
          <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
        </div>

        {renderTimeline(recent)}

        {/* ── Past Year section header ── */}
        <div data-aos="fade-up" style={{
          display: "flex",
          alignItems: "center",
          gap: 16,
          marginBottom: 40,
          marginTop: 64,
        }}>
          <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
          <span style={{
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: "#64748b",
            whiteSpace: "nowrap",
          }}>
            {t("cl.section.past")}
          </span>
          <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
        </div>

        {renderTimeline(past)}

        {/* ── CTA ── */}
        <div data-aos="fade-up" style={{
          maxWidth: 760,
          margin: "60px auto 0",
          textAlign: "center",
          padding: "40px 32px",
          background: "rgba(255,255,255,.025)",
          border: "1px solid rgba(255,255,255,.06)",
          borderRadius: 18,
        }}>
          <h3 style={{ fontSize: 20, fontWeight: 700, color: "#fff", marginBottom: 8 }}>
            {t("cl.cta.title")}
          </h3>
          <p style={{ color: "#94a3b8", fontSize: 14, marginBottom: 22 }}>
            {t("cl.cta.sub")}
          </p>
          <Link href={localizedPath("/contact-us", language)} style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "11px 26px",
            background: "linear-gradient(135deg, #6610f2, #4a0bb3)",
            color: "#fff",
            borderRadius: 9,
            fontWeight: 600,
            fontSize: 14,
            textDecoration: "none",
          }}>
            {t("cl.cta.btn")}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </Link>
        </div>

      </div>
    </section>
  );
}