import { ExternalLink } from "lucide-react";
import Link from "next/link";

import { Card } from "@/components/card";
import { CmsImage } from "@/components/cms-image";
import { ArrowLinkIcon } from "@/components/icon-system";
import { FadeItem } from "@/components/reveal";

type CaseStudyCardProps = {
  client: string;
  industry: string;
  projectType?: string | null;
  title: string;
  result: string;
  href: string;
  websiteUrl?: string | null;
  keyFeatures?: string[];
  metrics?: Array<{ label?: string; value?: string; detail?: string }>;
  technologies?: string[];
  image?: string | null;
};

export function CaseStudyCard({
  client,
  industry,
  projectType,
  title,
  result,
  href,
  websiteUrl,
  keyFeatures = [],
  metrics = [],
  technologies = [],
  image,
}: CaseStudyCardProps) {
  const visibleMetrics = metrics
    .filter((metric) => metric.label?.trim() || metric.value?.trim() || metric.detail?.trim())
    .slice(0, 2);

  return (
    <FadeItem>
      <Card className="flex h-full flex-col overflow-hidden p-0">
        {image ? (
          <CmsImage src={image} alt={title} className="m-3 mb-0 aspect-[16/9] overflow-hidden rounded-md" />
        ) : (
          <div className="m-3 mb-0 overflow-hidden rounded-md border border-slate-200 bg-figma-ice">
            <div className="blueprint-grid-light flex aspect-[16/9] items-end p-5">
              <div>
                <p className="text-xs font-semibold uppercase text-primary">Case study</p>
                <p className="mt-2 text-2xl font-semibold leading-none text-slate-950">{client}</p>
              </div>
            </div>
          </div>
        )}
        <div className="flex flex-1 flex-col p-7">
          <div className="flex flex-wrap items-center gap-2">
            <span className="rounded-full border border-primary/15 bg-primary-50 px-3 py-1 text-xs font-semibold text-primary">{client}</span>
            <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">{industry}</span>
          </div>
          <h3 className="mt-5 text-xl font-semibold leading-7 text-slate-950">{title}</h3>
          {projectType ? (
            <p className="mt-2 text-sm font-semibold leading-6 text-slate-700">{projectType}</p>
          ) : null}
          <div className="mt-5 grid gap-3 border-y border-slate-200/75 py-5">
            <div>
              <p className="text-[11px] font-semibold uppercase text-slate-500">Problem</p>
              <p className="mt-1 text-sm leading-6 text-slate-600">
                Kompleksan operativni kontekst: prodaja, sistemi, podaci i svakodnevni rad tima.
              </p>
            </div>
            <div>
              <p className="text-[11px] font-semibold uppercase text-primary">Rešenje</p>
              <p className="mt-1 text-sm leading-6 text-slate-700">{result}</p>
            </div>
          </div>
          {keyFeatures.length > 0 ? (
            <div className="mt-5">
              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">Ključne funkcionalnosti</p>
              <div className="mt-3 flex flex-wrap gap-2">
                {keyFeatures.slice(0, 5).map((feature) => (
                  <span key={feature} className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-600">
                    {feature}
                  </span>
                ))}
              </div>
            </div>
          ) : null}
          {visibleMetrics.length > 0 ? (
            <div className="mt-5 grid gap-2">
              {visibleMetrics.map((metric, index) => (
                <div key={`${metric.label ?? "metric"}-${index}`} className="rounded-lg border border-primary/10 bg-primary-50 px-3 py-2">
                  {metric.value ? <p className="text-base font-semibold leading-tight text-slate-950">{metric.value}</p> : null}
                  {metric.label ? <p className="mt-1 text-xs font-semibold text-primary">{metric.label}</p> : null}
                </div>
              ))}
            </div>
          ) : null}
          {technologies.length > 0 ? (
            <div className="mt-5 flex flex-wrap gap-2">
              {technologies.slice(0, 4).map((technology) => (
                <span
                  key={technology}
                  className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-600"
                >
                  {technology}
                </span>
              ))}
            </div>
          ) : null}
          {websiteUrl ? (
            <a
              href={websiteUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="group/link mt-6 inline-flex min-h-10 items-center gap-2 text-sm font-semibold text-primary hover:text-primary-700"
            >
              Pogledaj sajt
              <ExternalLink aria-hidden="true" className="h-4 w-4 transition group-hover/link:-translate-y-0.5 group-hover/link:translate-x-0.5" strokeWidth={1.8} />
            </a>
          ) : (
            <Link
              href={href}
              className="group/link mt-6 inline-flex min-h-10 items-center gap-2 text-sm font-semibold text-primary hover:text-primary-700"
            >
              Pogledaj referencu
              <ArrowLinkIcon />
            </Link>
          )}
        </div>
      </Card>
    </FadeItem>
  );
}