"use client";

import Link from "next/link";
import type { SetupChecklistItem } from "../types";

export function SetupChecklist({
  items,
  completionPercent,
}: {
  items: SetupChecklistItem[];
  completionPercent?: number | null;
}) {
  if (!items.length) {
    return (
      <p className="text-sm text-gray-500">
        چک‌لیست راه‌اندازی از commercial checklist API یا محصولات کشف‌شده ساخته می‌شود.
      </p>
    );
  }

  const doneCount = items.filter((i) => i.done).length;
  const computed =
    completionPercent != null
      ? completionPercent
      : Math.round((doneCount / items.length) * 100);

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between text-xs text-gray-500">
        <span>پیشرفت راه‌اندازی</span>
        <span className="font-semibold text-secondary">{computed}%</span>
      </div>
      <div className="h-2 overflow-hidden rounded-full bg-gray-100">
        <div
          className="h-full rounded-full bg-primary transition-all"
          style={{ width: `${Math.min(100, Math.max(0, computed))}%` }}
        />
      </div>
      <ul className="space-y-2">
        {items.map((item) => (
          <li
            key={item.id}
            className="flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2.5 text-sm"
          >
            <span className="text-secondary">
              {item.done ? "✓ " : item.required ? "● " : "○ "}
              {item.label}
            </span>
            {item.href ? (
              <Link
                href={item.href}
                className="shrink-0 text-xs font-medium text-primary hover:underline"
              >
                رفتن
              </Link>
            ) : null}
          </li>
        ))}
      </ul>
    </div>
  );
}