import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";

export default async function PerfilPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const contractor = await prisma.contractorProfile.findUnique({
    where: { id: Number(id) },
    include: {
      reviews: { orderBy: { date: "desc" }, take: 20 },
      user: true,
    },
  });
  if (!contractor) notFound();

  return (
    <div>
      <Link href="/servicios" className="text-sm text-[var(--lime)]">
        ← Servicios
      </Link>
      <div className="card mt-4">
        <div className="flex flex-wrap gap-4">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={contractor.image}
            alt=""
            className="h-24 w-24 rounded-full object-cover"
          />
          <div>
            <h1 className="text-2xl font-semibold">
              {contractor.name}{" "}
              {contractor.verified && (
                <span className="text-[var(--lime)]">✓</span>
              )}
            </h1>
            <p className="text-white/60">
              {contractor.category} · {contractor.city} · Tier {contractor.tier}
            </p>
            <p className="mt-1 text-[var(--lime)]">
              ★ {contractor.rating.toFixed(1)} · {contractor.reviewsCount}{" "}
              reseñas · {contractor.completed} completados · ~{contractor.responseTime}{" "}
              min respuesta
            </p>
          </div>
        </div>
        <p className="mt-4 text-white/75">{contractor.bio}</p>
        <div className="mt-4 flex gap-3">
          <Link href="/solicitudes/nueva" className="btn-primary">
            Solicitar servicio
          </Link>
          {contractor.userId && (
            <Link
              href={`/chat?key=${encodeURIComponent(`${contractor.user?.email}::${contractor.id}`)}&title=${encodeURIComponent(contractor.name)}`}
              className="btn-ghost"
            >
              Chat
            </Link>
          )}
        </div>
      </div>

      <h2 className="mt-8 text-xl font-semibold">Reseñas</h2>
      <div className="mt-3 space-y-3">
        {contractor.reviews.map((r) => (
          <div key={r.id} className="card">
            <div className="flex items-center gap-2">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={r.avatar || contractor.image} alt="" className="h-8 w-8 rounded-full" />
              <div>
                <p className="text-sm font-medium">{r.author}</p>
                <p className="text-xs text-[var(--lime)]">★ {r.rating}</p>
              </div>
            </div>
            <p className="mt-2 text-sm text-white/70">{r.comment}</p>
          </div>
        ))}
        {!contractor.reviews.length && (
          <p className="text-sm text-white/50">Sin reseñas aun.</p>
        )}
      </div>
    </div>
  );
}