import Link from "next/link";
import { TimerCell } from "@/components/admin/TimerCell";
import type { ProjectWithPayments } from "@/lib/admin-queries";

const statusConfig: Record<string, { label: string; className: string }> = {
  da_saldare: {
    label: "Da saldare",
    className:
      "bg-rose-50 text-rose-700 border-rose-100 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-900",
  },
  inviata: {
    label: "Inviata",
    className:
      "bg-amber-50 text-amber-600 border-amber-100 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900",
  },
  saldato: {
    label: "Saldato",
    className:
      "bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900",
  },
};

function PaymentBadge({ prefix, status }: { prefix: string; status: string }) {
  const info = statusConfig[status] ?? {
    label: status,
    className: "bg-muted text-muted-foreground border-border",
  };
  return (
    <span
      className={`inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-semibold tracking-wide uppercase border whitespace-nowrap ${info.className}`}
    >
      {prefix}: {info.label}
    </span>
  );
}

export function ProjectRow({ project }: { project: ProjectWithPayments }) {
  const acconto = project.payments.find((p) => p.label.toLowerCase().includes("acconto"));
  const saldo = project.payments.find((p) => p.label.toLowerCase().includes("saldo"));

  const hours = project.totalTrackedSeconds / 3600;
  const eurPerHour = hours > 0 ? parseFloat(project.accepted_total) / hours : null;

  return (
    <tr
      className={`hover:bg-muted/40 transition-colors ${project.archived ? "opacity-60" : ""}`}
    >
      <td className="py-4 px-6">
        <Link
          href={`/admin/projects/${project.id}`}
          className="font-semibold text-foreground hover:text-primary transition-colors"
        >
          {project.name}
        </Link>
        <p className="text-[11px] text-muted-foreground mt-0.5">{project.client.name}</p>
        {project.archived && (
          <span className="mt-1 inline-block text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded-full">
            Archiviato
          </span>
        )}
      </td>

      <td className="py-4 px-6 text-right font-medium text-foreground font-mono whitespace-nowrap">
        €{parseFloat(project.accepted_total).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
      </td>

      <td className="py-4 px-6 text-center">
        {acconto ? (
          <PaymentBadge prefix="Acconto" status={acconto.status} />
        ) : (
          <span className="text-muted-foreground/40">—</span>
        )}
      </td>

      <td className="py-4 px-6 text-center">
        {saldo ? (
          <PaymentBadge prefix="Saldo" status={saldo.status} />
        ) : (
          <span className="text-muted-foreground/40">—</span>
        )}
      </td>

      <td className="py-4 px-6">
        <div className="flex justify-center">
          <TimerCell
            clientId={project.id}
            projectId={project.id}
            activeEntryId={project.activeTimerEntryId}
            activeStartedAt={project.activeTimerStartedAt}
            totalTrackedSeconds={project.totalTrackedSeconds}
          />
        </div>
      </td>

      <td className="py-4 px-6 text-right whitespace-nowrap">
        {eurPerHour === null ? (
          <span className="text-muted-foreground/40 font-medium">—</span>
        ) : eurPerHour > 0 ? (
          <span className="inline-flex items-center justify-end gap-1.5 font-mono font-bold text-emerald-700 dark:text-emerald-400">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
            €{eurPerHour.toFixed(2)}/h
          </span>
        ) : (
          <span className="font-mono font-semibold text-muted-foreground">
            €{eurPerHour.toFixed(2)}/h
          </span>
        )}
      </td>
    </tr>
  );
}
