import Link from "next/link";
import { ArrowRight, Phone } from "lucide-react";

import { Badge } from "@/components/badge";
import { Button } from "@/components/button";
import { Card } from "@/components/card";
import { CheckLine, IconMark, getServiceIcon } from "@/components/icon-system";
import { FadeItem } from "@/components/reveal";
import { company } from "@/data/company";
import type { CaseStudyMetric, CaseStudyWorkflow, OperationalCaseStudy } from "@/data/operational-case-studies";

export function CaseStudyMetricCard({ metric }: { metric: CaseStudyMetric }) {
  return (
    <div className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_14px_42px_rgb(15_23_42_/_0.05)]">
      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">{metric.label}</p>
      <p className="mt-3 text-3xl font-semibold leading-none text-slate-950 sm:text-4xl">{metric.value}</p>
      <p className="mt-3 text-sm leading-6 text-slate-600">{metric.detail}</p>
    </div>
  );
}

export function CaseStudyWorkflowDiagram({ workflow }: { workflow: CaseStudyWorkflow }) {
  return (
    <div className="rounded-3xl border border-slate-200/80 bg-white p-5 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)] sm:p-6">
      <div className="flex items-center justify-between gap-4 border-b border-slate-200/70 pb-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Workflow</p>
          <h3 className="mt-2 text-xl font-semibold leading-7 text-slate-950">{workflow.title}</h3>
        </div>
      </div>
      <div className="mt-6 grid gap-3 lg:grid-cols-[repeat(auto-fit,minmax(8rem,1fr))]">
        {workflow.steps.map((step, index) => {
          const Icon = getServiceIcon(step.iconKey);

          return (
            <div key={`${workflow.title}-${step.label}`} className="relative">
              <div className="flex h-full flex-col rounded-2xl border border-slate-200/80 bg-slate-50/70 p-4">
                <IconMark icon={Icon} className="mb-4 h-9 w-9 bg-white" />
                <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <p className="mt-2 text-sm font-semibold leading-6 text-slate-950">{step.label}</p>
              </div>
              {index < workflow.steps.length - 1 ? (
                <ArrowRight
                  aria-hidden="true"
                  className="absolute -right-3 top-1/2 hidden h-5 w-5 -translate-y-1/2 text-slate-300 lg:block"
                  strokeWidth={1.8}
                />
              ) : null}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export function OperationalCaseStudyCard({ item }: { item: OperationalCaseStudy }) {
  return (
    <FadeItem>
      <Card className="flex h-full flex-col p-7">
        <div className="flex flex-wrap items-center gap-2">
          <Badge tone="slate">{item.industry}</Badge>
        </div>
        <p className="mt-6 text-sm font-semibold text-primary">{item.client}</p>
        <h3 className="mt-2 text-2xl font-semibold leading-8 text-slate-950">{item.title}</h3>
        <p className="mt-4 flex-1 text-sm leading-6 text-slate-600">{item.summary}</p>
        <div className="mt-6 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Ključni rezultat</p>
          <p className="mt-2 text-sm leading-6 text-slate-700">{item.keyResult}</p>
        </div>
        <div className="mt-5 flex flex-wrap gap-2">
          {item.tags.slice(0, 5).map((tag) => (
            <span key={tag} className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-600">
              {tag}
            </span>
          ))}
        </div>
        <Link
          href={`/case-studies/${item.slug}`}
          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 case study
          <ArrowRight aria-hidden="true" className="h-4 w-4 transition group-hover/link:translate-x-0.5" strokeWidth={1.8} />
        </Link>
      </Card>
    </FadeItem>
  );
}

export function CaseStudyPointList({ points }: { points: string[] }) {
  return (
    <ul className="mt-6 grid gap-3">
      {points.map((point) => (
        <CheckLine key={point}>{point}</CheckLine>
      ))}
    </ul>
  );
}

type CaseStudyCTAProps = {
  title?: string;
  description?: string;
};

export function CaseStudyCTA({
  title = "Želite sličan sistem?",
  description = "Pošaljite nam kako trenutno obrađujete porudžbine, robu, magacine, prodavnice i ERP. Razgovor kreće od procesa, ne od gotovog šablona.",
}: CaseStudyCTAProps) {
  return (
    <section className="relative overflow-hidden border-y border-white/10 bg-[#111111] py-16 text-white sm:py-20">
      <div className="absolute inset-0 blueprint-grid opacity-80" />
      <div className="absolute left-1/2 top-0 h-64 w-[38rem] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl" />
      <div className="mx-auto w-full max-w-7xl px-5 sm:px-6 lg:px-8 relative">
        <div className="grid items-center gap-8 rounded-3xl border border-white/10 bg-white/[0.035] p-6 shadow-[0_30px_100px_rgb(0_0_0_/_0.24)] sm:p-8 md:grid-cols-[1fr_auto] lg:p-10">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Konsultacije</p>
            <h2 className="mt-4 max-w-3xl text-3xl font-semibold leading-[1.1] sm:text-4xl">{title}</h2>
            <p className="mt-5 max-w-2xl text-base leading-7 text-slate-300">
              {description}
            </p>
            <a href={company.phoneHref} className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-white hover:text-primary">
              <Phone aria-hidden="true" className="h-4 w-4 text-primary" strokeWidth={1.8} />
              Telefon: {company.phone}
            </a>
          </div>
          <Button
            href="/kontakt"
            variant="primary"
            size="lg"
            data-lead-type="ecommerce"
            data-lead-subject={`Upit: ${title}`}
            data-source-section="Case study CTA"
          >
            Zakažite konsultacije
          </Button>
        </div>
      </div>
    </section>
  );
}