"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import {
  MapPin,
  Calendar,
  CheckCircle2,
  HardHat,
  Loader2,
  Anchor,
  Radar,
  Droplets,
  Ship,
  Fuel,
  Cylinder,
  ArrowRight,
  Download,
  type LucideProps,
} from "lucide-react";
import FadeIn from "@/components/animations/FadeIn";
import { Button } from "@/components/ui/button";
import { getProjectsPageProjects } from "@/services/pages/public/projects/client";
import type { ProjectsPageProject, ProjectsPageMeta } from "@/services/pages/public/projects";

type IconComponent = React.ComponentType<LucideProps>;

const ICON_MAP: Record<string, IconComponent> = {
  Anchor,
  Radar,
  Droplets,
  Ship,
  Fuel,
  HardHat,
  Cylinder,
};

function resolveIcon(name: string | null): IconComponent {
  return (name && ICON_MAP[name]) ? ICON_MAP[name] : HardHat;
}

interface Props {
  initialData: ProjectsPageProject[];
  initialMeta: ProjectsPageMeta;
}

function ProjectCard({ project, index }: { project: ProjectsPageProject; index: number }) {
  const Icon = resolveIcon(project.icon);
  const isReversed = index % 2 !== 0;

  return (
    <FadeIn
      as="article"
      id={project.slug}
      y={40}
      duration={0.6}
      margin="-60px"
      className="scroll-mt-24"
    >
      <div className={`grid lg:grid-cols-2 gap-0 petro-card overflow-hidden ${isReversed ? "lg:direction-rtl" : ""}`}>
        {/* Image */}
        <div className={`relative h-72 lg:h-auto min-h-[360px] overflow-hidden ${isReversed ? "lg:order-2" : ""}`}>
          {project.image_url ? (
            <Image
              src={project.image_url}
              alt={project.title}
              fill
              className="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
            />
          ) : (
            <div className="flex h-full items-center justify-center bg-primary/10">
              <HardHat size={64} className="text-primary/20" />
            </div>
          )}
          {project.year && (
            <div className="absolute top-6 left-6 bg-primary/90 backdrop-blur-sm px-4 py-2 flex items-center gap-2">
              <Calendar size={14} className="text-accent" />
              <span className="text-xs font-bold text-primary-foreground tracking-wider">{project.year}</span>
            </div>
          )}
        </div>

        {/* Content */}
        <div className={`p-8 lg:p-12 flex flex-col justify-center ${isReversed ? "lg:order-1" : ""}`}>
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded bg-accent/10 flex items-center justify-center">
              <Icon size={20} className="text-accent" />
            </div>
            {project.location && (
              <div className="flex items-center gap-2 text-accent text-[10px] font-bold uppercase tracking-[0.2em]">
                <MapPin size={12} />
                {project.location}
              </div>
            )}
          </div>

          <h3 className="text-2xl font-bold text-foreground mb-2 tracking-tight">{project.title}</h3>
          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
            Client: {project.client}
          </p>

          {project.summary && (
            <p className="text-muted-foreground text-sm leading-relaxed mb-6">{project.summary}</p>
          )}

          {/* Scope */}
          {project.scope.length > 0 && (
            <div className="mb-6">
              <h4 className="text-xs font-bold uppercase tracking-[0.2em] text-primary mb-3">Scope of Work</h4>
              <ul className="space-y-2">
                {project.scope.map((item, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
                    <CheckCircle2 size={14} className="text-accent mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Technologies */}
          {project.technologies.length > 0 && (
            <div className="flex flex-wrap gap-2 mb-6">
              {project.technologies.map((tech, i) => (
                <span
                  key={i}
                  className="px-3 py-1 bg-secondary text-secondary-foreground text-[10px] font-bold uppercase tracking-wider rounded-sm"
                >
                  {tech}
                </span>
              ))}
            </div>
          )}

          {/* Outcome */}
          {project.outcome && (
            <div className="bg-secondary/50 border-l-2 border-accent p-4 rounded-r-sm">
              <h4 className="text-xs font-bold uppercase tracking-[0.2em] text-accent mb-2">Key Outcome</h4>
              <p className="text-sm text-foreground leading-relaxed">{project.outcome}</p>
            </div>
          )}

          {/* Document download */}
          {project.document_url && (
            <a
              href={project.document_url}
              download
              target="_blank"
              rel="noopener noreferrer"
              className="mt-6 inline-flex items-center gap-2 self-start px-4 py-2 border border-accent/40 text-accent text-xs font-bold uppercase tracking-wider rounded-sm hover:bg-accent hover:text-accent-foreground transition-colors"
            >
              <Download size={13} />
              Download Project Report
            </a>
          )}

          {/* Explore Project CTA */}
          <div className="mt-6 pt-6 border-t border-border">
            <Link
              href={`/projects/${project.slug}`}
              className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wider rounded-sm hover:bg-primary/90 transition-colors group"
            >
              Explore Project
              <ArrowRight size={13} className="transition-transform group-hover:translate-x-0.5" />
            </Link>
          </div>
        </div>
      </div>
    </FadeIn>
  );
}

export function ProjectsGrid({ initialData, initialMeta }: Props) {
  const [data, setData] = useState(initialData);
  const [meta, setMeta] = useState(initialMeta);
  const [loading, setLoading] = useState(false);

  const loadMore = async () => {
    if (!meta.has_more || !meta.next_cursor || loading) return;
    setLoading(true);
    try {
      const { data: next, meta: nextMeta } = await getProjectsPageProjects(meta.next_cursor);
      setData((prev) => [...prev, ...next]);
      setMeta(nextMeta);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="space-y-12">
        {data.map((project, i) => (
          <ProjectCard key={project.slug} project={project} index={i} />
        ))}
      </div>

      {meta.has_more && (
        <div className="mt-12 flex justify-center">
          <Button
            variant="outline"
            onClick={loadMore}
            disabled={loading}
            className="min-w-[160px]"
          >
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Loading…
              </>
            ) : (
              "Load More Projects"
            )}
          </Button>
        </div>
      )}
    </>
  );
}