"use client";

import { useState } from "react";
import Image from "next/image";
import { Calendar, ExternalLink } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { NewsModal } from "@/components/ui/NewsModal";
import type { SiteContent, NewsItem } from "@/types/content";

interface NewsProps {
  data: SiteContent["news"];
}

function formatDate(iso: string): string {
  try {
    return new Date(iso).toLocaleDateString("ru-RU", {
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  } catch {
    return iso;
  }
}

function FeaturedArticle({
  item,
  onClick,
}: {
  item: NewsItem;
  onClick: () => void;
}) {
  return (
    <article
      className="group relative overflow-hidden rounded-3xl cursor-pointer"
      onClick={onClick}
    >
      {item.image && (
        <div className="relative aspect-[21/9] sm:aspect-[2/1] overflow-hidden">
          <Image
            src={item.image}
            alt={item.title}
            fill
            loading="lazy"
            sizes="(min-width: 768px) 80vw, 100vw"
            className="object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
        </div>
      )}
      <div
        className={`${item.image ? "absolute bottom-0 left-0 right-0 p-6 sm:p-8" : "p-6 sm:p-8 bg-neutral-900 rounded-3xl"}`}
      >
        <span className="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/80 backdrop-blur-sm">
          <Calendar size={12} />
          {formatDate(item.date)}
        </span>
        <h3 className="mt-3 text-xl sm:text-2xl font-bold text-white leading-tight">
          {item.title}
        </h3>
        <p className="mt-2 max-w-2xl text-sm leading-relaxed text-white/70 line-clamp-3">
          {item.text}
        </p>
      </div>
    </article>
  );
}

function CompactArticle({
  item,
  onClick,
}: {
  item: NewsItem;
  onClick: () => void;
}) {
  return (
    <article
      className="group flex gap-4 items-start py-5 border-b border-neutral-200/60 last:border-0 dark:border-white/[0.06] cursor-pointer"
      onClick={onClick}
    >
      {item.image && (
        <div className="relative w-24 h-24 sm:w-28 sm:h-28 shrink-0 overflow-hidden rounded-xl">
          <Image
            src={item.image}
            alt={item.title}
            fill
            loading="lazy"
            sizes="112px"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </div>
      )}
      <div className="flex-1 min-w-0">
        <span className="text-xs text-neutral-400 dark:text-white/30">
          {formatDate(item.date)}
        </span>
        <h3 className="mt-1 text-sm sm:text-base font-bold text-neutral-900 dark:text-white leading-snug line-clamp-2 group-hover:text-gold transition-colors">
          {item.title}
        </h3>
        <p className="mt-1 text-sm leading-relaxed text-neutral-500 dark:text-neutral-400 line-clamp-2">
          {item.text}
        </p>
      </div>
    </article>
  );
}

export function News({ data }: NewsProps) {
  const [selected, setSelected] = useState<NewsItem | null>(null);

  if (!data.items || data.items.length === 0) return null;

  const [featured, ...rest] = data.items;

  return (
    <section id="news" className="section-glow relative section-padding">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container">
        <Reveal>
          <SectionHeading centered>{data.title}</SectionHeading>
        </Reveal>

        <div className="mx-auto mt-10 max-w-4xl space-y-6">
          <Reveal>
            <FeaturedArticle
              item={featured}
              onClick={() => setSelected(featured)}
            />
          </Reveal>

          {rest.length > 0 && (
            <Reveal>
              <div className="rounded-2xl bg-neutral-50/80 px-5 sm:px-6 dark:bg-white/[0.02]">
                {rest.map((item) => (
                  <CompactArticle
                    key={item.title}
                    item={item}
                    onClick={() => setSelected(item)}
                  />
                ))}
              </div>
            </Reveal>
          )}
        </div>
      </div>

      <NewsModal item={selected} onClose={() => setSelected(null)} />
    </section>
  );
}
