import Link from "next/link";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { money, quoteTotal } from "@/lib/fees";
import { redirect } from "next/navigation";

export default async function SolicitudesPage() {
  const session = await auth();
  if (!session?.user?.email) redirect("/login");

  const user = await prisma.user.findUnique({
    where: { email: session.user.email },
    include: { contractorProfile: true },
  });

  const requests =
    user?.role === "contractor" && user.contractorProfile
      ? await prisma.serviceRequest.findMany({
          where: {
            OR: [
              { status: "open" },
              { contractorId: user.contractorProfile.id },
            ],
          },
          include: { quote: true },
          orderBy: { date: "desc" },
        })
      : await prisma.serviceRequest.findMany({
          where: { ownerEmail: session.user.email },
          include: { quote: true },
          orderBy: { date: "desc" },
        });

  return (
    <div>
      <div className="mb-6 flex items-end justify-between gap-4">
        <div>
          <h1 className="text-3xl font-semibold">Solicitudes</h1>
          <p className="text-white/60">
            {user?.role === "contractor"
              ? "Abiertas y asignadas a ti"
              : "Tus solicitudes de servicio"}
          </p>
        </div>
        <Link href="/solicitudes/nueva" className="btn-primary">
          Nueva solicitud
        </Link>
      </div>
      <div className="space-y-3">
        {requests.map((r) => (
          <Link key={r.id} href={`/solicitudes/${r.id}`} className="card flex gap-4">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={r.image} alt="" className="h-20 w-28 rounded-xl object-cover" />
            <div className="flex-1">
              <div className="flex flex-wrap items-center gap-2">
                <p className="font-semibold">{r.title}</p>
                <span className="badge">{r.status}</span>
              </div>
              <p className="text-sm text-white/60">
                {r.category} · {r.address} · presupuesto {money(r.budget)}
              </p>
              {r.quote && (
                <p className="mt-1 text-sm text-[var(--lime)]">
                  Cotizacion: {money(quoteTotal(r.quote))}
                </p>
              )}
            </div>
          </Link>
        ))}
        {!requests.length && (
          <p className="text-white/50">No hay solicitudes.</p>
        )}
      </div>
    </div>
  );
}