"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Star } from "lucide-react";
import type { WriterProfile } from "@/services/joomlaService";

const cpanelUrl = process.env.NEXT_PUBLIC_CPANEL_URL || "https://customerpanel.globalassignmenthelp.com";

function getHireUrl(writerName: string): string {
  return `${cpanelUrl}/Order?writer=${encodeURIComponent(writerName)}`;
}

interface WriterSpotlightCarouselProps {
  writers: WriterProfile[];
  images: string[];
  subtitle: string;
  /** Real, display-only "Completed Orders" number per writer — see `displayOnlyCount`'s own comment for why this isn't a real counter. */
  completedOrders: number[];
  hireUrl?: (writerName: string) => string;
  hireUrls?: string[];
}

function StarRow({ score }: { score: number }) {
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((n) => (
        <Star
          key={n}
          className="w-3.5 h-3.5"
          fill={n <= Math.round(score) ? "#F58E0E" : "none"}
          stroke={n <= Math.round(score) ? "#F58E0E" : "#D8D8D8"}
        />
      ))}
    </div>
  );
}

/**
 * The live sidebar's "100+ Qualified Writers" spot — a single-card
 * auto-rotating carousel over the real writer list (same `getWriters()`
 * data every other writer listing in this app reads), not a static stacked
 * list. Advances on a timer, with dot pagination for manual control —
 * replacing the earlier static `<ul>` version of this same data.
 */
export function WriterSpotlightCarousel({
  writers,
  images,
  subtitle,
  completedOrders,
  hireUrl,
  hireUrls,
}: WriterSpotlightCarouselProps) {
  const [index, setIndex] = useState(0);
  const count = writers.length;

  useEffect(() => {
    if (count <= 1) return;
    const timer = setInterval(() => setIndex((i) => (i + 1) % count), 3500);
    return () => clearInterval(timer);
  }, [count]);

  if (count === 0) return null;

  const writer = writers[index];
  const image = images[index];
  const orders = completedOrders[index];
  const hireLink = hireUrls?.[index] ?? (hireUrl ? hireUrl(writer.name) : getHireUrl(writer.name));

  return (
    <div className="rounded-xl bg-white border border-slate-200 shadow-sm p-5">
      <p className="text-center text-base font-bold text-slate-900">100+ Qualified Writers</p>
      <p className="text-center text-xs text-slate-500 mb-4">{subtitle}</p>

      <div className="rounded-lg bg-slate-50 p-4">
        <div className="flex items-start gap-3">
          {/* eslint-disable-next-line @next/next/no-img-element -- resolved CMS/fallback image */}
          <img
            src={image}
            alt={writer.name}
            className="w-12 h-12 rounded-md object-cover shrink-0 border border-slate-200"
          />
          <div>
            <StarRow score={writer.rating ?? 5.0} />
            <p className="text-xs text-slate-500 mt-1">{orders} - Completed Orders</p>
          </div>
        </div>

        <p className="text-sm font-bold text-slate-900 mt-3">
          {writer.name}{" "}
          <Link href={`/writers/${writer.alias}`} className="text-xs font-semibold text-[#f58e0e]">
            View Profile
          </Link>
        </p>
        {writer.degree && <p className="text-xs italic text-slate-500">{writer.degree}</p>}
        {writer.location && <p className="text-xs text-slate-500">{writer.location}</p>}

        <a
          href={hireLink}
          className="mt-3 inline-block rounded bg-[#5C7A36] hover:bg-[#4E6C2F] text-white text-xs font-bold px-4 py-1.5 transition-colors"
        >
          Hire Me
        </a>
      </div>

      <div className="flex items-center justify-center gap-1.5 mt-4">
        {writers.map((w, i) => (
          <button
            key={w.id}
            type="button"
            aria-label={`Show writer ${i + 1}`}
            onClick={() => setIndex(i)}
            className={`h-1.5 rounded-full transition-all ${
              i === index ? "w-5 bg-[#f58e0e]" : "w-3 bg-slate-200"
            }`}
          />
        ))}
      </div>

      <Link
        href="/writers"
        className="mt-4 block text-center rounded-lg bg-[#f58e0e] hover:bg-[#e07d0d] text-white font-bold text-xs py-2.5 transition-colors"
      >
        View All Writers
      </Link>
    </div>
  );
}