import Link from "next/link";
import Image from "next/image";
import type { CaseStudy, Industry, Locale, PartnerBrand, Solution } from "@/types/content";
import { localizedPath } from "@/lib/routing";
import { ProjectVisual } from "@/components/ui/ProjectVisual";
import { getImageAlt, getImageUrl } from "@/lib/images";

export function SolutionCard({ item, locale }: { item: Solution; locale: Locale }) {
  const eyebrow = getSolutionEyebrow(item, locale);

  return (
    <article className="card solution-card">
      <p className="eyebrow">{eyebrow}</p>
      <h3>{item.title[locale]}</h3>
      <p>{item.shortDescription[locale]}</p>
      <Link
        prefetch={false}
        href={localizedPath(`/solutions/${item.slug}`, locale)}
        aria-label={`${locale === "id" ? "Lihat solusi" : "Explore solution"}: ${item.title[locale]}`}
      >
        {locale === "id" ? "Lihat solusi" : "Explore solution"} →
      </Link>
    </article>
  );
}

const solutionEyebrowBySlug: Record<string, { en: string; id: string }> = {
  "smart-classroom": { en: "Learning Space", id: "Ruang Belajar" },
  "meeting-room-video-conference": { en: "Workplace", id: "Workplace" },
  "led-display-videotron": { en: "Display", id: "Display" },
  "digital-signage": { en: "Managed Content", id: "Konten Terjadwal" },
  "command-center": { en: "Mission Critical", id: "Mission Critical" },
  "immersive-room": { en: "Experience", id: "Experience" },
  "professional-audio-system": { en: "Audio", id: "Audio" }
};

function getSolutionEyebrow(item: Solution, locale: Locale) {
  const mapped = solutionEyebrowBySlug[item.slug]?.[locale];
  const value = item.eyebrow?.[locale];
  if (!value || value === item.icon || value === "Solution" || value === "Solusi") return mapped ?? (locale === "id" ? "Solusi" : "Solution");
  return value;
}

export function CaseStudyCard({ item, locale }: { item: CaseStudy; locale: Locale }) {
  return (
    <article className="case-card">
      <ProjectVisual image={item.heroImage} label={item.title[locale]} />
      <div>
        <h3>{item.title[locale]}</h3>
        <p>{item.shortSummary[locale]}</p>
        <Link
          prefetch={false}
          href={localizedPath(`/success-stories/${item.slug}`, locale)}
          aria-label={`${locale === "id" ? "Baca success story" : "Read success story"}: ${item.title[locale]}`}
        >
          {locale === "id" ? "Baca success story" : "Read success story"} →
        </Link>
      </div>
    </article>
  );
}

export function IndustryCard({ item, locale }: { item: Industry; locale: Locale }) {
  return (
    <Link className="industry-pill" prefetch={false} href={localizedPath(`/industries/${item.slug}`, locale)}>
      {item.title[locale]}
    </Link>
  );
}

export function PartnerLogoGrid({ items, locale }: { items: PartnerBrand[]; locale: Locale }) {
  return (
    <div className="partner-grid">
      {items.map((item) => {
        const logoUrl = getImageUrl(item.logo);

        return (
          <a href={item.website} target="_blank" rel="noreferrer" className="partner-card" key={item.name}>
            {logoUrl ? (
              <Image src={logoUrl} alt={getImageAlt(item.logo, `${item.name} logo`)} width={140} height={56} className="partner-logo" />
            ) : (
              <strong>{item.name}</strong>
            )}
            <span>{item.category}</span>
            <p>{item.description[locale]}</p>
          </a>
        );
      })}
    </div>
  );
}
