"use client";

import { useState } from "react";
import { Link } from "@/i18n/navigation";

export type OrderRow = {
  id: string;
  title: string;
  tagLabel: string;
  tagColor: string;
  meta: string;
  phase: "active" | "done";
  unsignedContractLabel: string | null;
};

type Filter = "all" | "active" | "done";

export function AccountOrdersList({
  orders,
  labels,
}: {
  orders: OrderRow[];
  labels: { all: string; active: string; done: string; empty: string };
}) {
  const [filter, setFilter] = useState<Filter>("all");
  const shown = orders.filter((o) => filter === "all" || o.phase === filter);

  const counts = {
    all: orders.length,
    active: orders.filter((o) => o.phase === "active").length,
    done: orders.filter((o) => o.phase === "done").length,
  };

  const pill = (id: Filter, label: string) => (
    <button
      type="button"
      onClick={() => setFilter(id)}
      className={`rounded-full border px-3.5 py-1.5 text-xs uppercase tracking-[0.1em] transition-colors ${
        filter === id
          ? "border-white bg-white/10 text-[var(--rk-ink)]"
          : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
      }`}
    >
      {label} <span className="opacity-60">{counts[id]}</span>
    </button>
  );

  return (
    <div>
      <div className="mb-5 flex flex-wrap gap-2">
        {pill("all", labels.all)}
        {pill("active", labels.active)}
        {pill("done", labels.done)}
      </div>

      {shown.length === 0 ? (
        <p className="text-sm text-[var(--rk-ink-muted)]">{labels.empty}</p>
      ) : (
        <ul className="flex flex-col gap-3">
          {shown.map((o) => (
            <li key={o.id}>
              <Link
                href={`/account/orders/${o.id}`}
                className="block rounded-xl border border-white/10 bg-[var(--rk-surface)] px-5 py-4 transition-colors hover:border-white/25"
              >
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <p className="text-sm font-medium">{o.title}</p>
                  <div className="flex items-center gap-2">
                    {o.unsignedContractLabel && (
                      <span className="rounded-full border border-amber-400/40 text-amber-400 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.1em]">
                        {o.unsignedContractLabel}
                      </span>
                    )}
                    <span
                      className="rounded-full border px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.1em]"
                      style={{ borderColor: `${o.tagColor}66`, color: o.tagColor }}
                    >
                      {o.tagLabel}
                    </span>
                  </div>
                </div>
                {o.meta && <p className="mt-1.5 text-xs text-[var(--rk-ink-muted)]">{o.meta}</p>}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}