import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { money, quoteTotal } from "@/lib/fees";
import {
  approveQuoteAction,
  completeRequestAction,
  payServiceInvoiceAction,
  rejectQuoteAction,
  submitQuoteAction,
} from "@/server/actions/services";
import { SignaturePad } from "@/components/SignaturePad";
import { InvoiceDownload } from "@/components/InvoiceDownload";

export default async function SolicitudDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const session = await auth();
  if (!session?.user?.email) redirect("/login");
  const { id } = await params;
  const req = await prisma.serviceRequest.findUnique({
    where: { id: Number(id) },
    include: { quote: true, contractor: true },
  });
  if (!req) notFound();

  const user = await prisma.user.findUnique({
    where: { email: session.user.email },
    include: { contractorProfile: true },
  });
  const isOwner = req.ownerEmail === session.user.email;
  const isContractor =
    user?.role === "contractor" || user?.role === "admin";

  return (
    <div className="mx-auto max-w-2xl">
      <Link href="/solicitudes" className="text-sm text-[var(--lime)]">
        ← Solicitudes
      </Link>
      <div className="card mt-4">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={req.image} alt="" className="mb-4 h-48 w-full rounded-xl object-cover" />
        <div className="flex flex-wrap items-center gap-2">
          <h1 className="text-2xl font-semibold">{req.title}</h1>
          <span className="badge">{req.status}</span>
        </div>
        <p className="mt-2 text-white/60">
          {req.category} · {req.address} · {money(req.budget)} · {req.urgency}
        </p>
        <p className="mt-3 text-white/80">{req.description}</p>
      </div>

      {req.quote && (
        <div className="card mt-4">
          <h2 className="font-semibold">Cotizacion — {req.quote.contractorName}</h2>
          <ul className="mt-3 space-y-1 text-sm text-white/70">
            <li>Mano de obra: {money(req.quote.labor)}</li>
            <li>Materiales: {money(req.quote.materials)}</li>
            <li>Viaje: {money(req.quote.travel)}</li>
            <li>Peajes: {money(req.quote.tolls)}</li>
            <li className="text-[var(--lime)]">
              Total: {money(quoteTotal(req.quote))}
            </li>
          </ul>
          {req.quote.notes && (
            <p className="mt-2 text-sm text-white/60">{req.quote.notes}</p>
          )}
          <InvoiceDownload
            title={req.title}
            labor={req.quote.labor}
            materials={req.quote.materials}
            travel={req.quote.travel}
            tolls={req.quote.tolls}
            contractor={req.quote.contractorName}
          />
        </div>
      )}

      {isOwner && req.status === "quoted" && req.quote && (
        <div className="card mt-4 space-y-4">
          <h2 className="font-semibold">Firmar y aprobar</h2>
          <form action={approveQuoteAction} className="space-y-3">
            <input type="hidden" name="requestId" value={req.id} />
            <SignaturePad name="signature" />
            <div className="flex gap-2">
              <button className="btn-primary" type="submit">
                Aprobar cotizacion
              </button>
            </div>
          </form>
          <form action={rejectQuoteAction}>
            <input type="hidden" name="requestId" value={req.id} />
            <button className="btn-ghost" type="submit">
              Rechazar
            </button>
          </form>
        </div>
      )}

      {isOwner &&
        req.status === "in_progress" &&
        req.quote &&
        req.invoiceStatus !== "paid" &&
        req.invoiceStatus !== "awaiting_confirmation" && (
        <form action={payServiceInvoiceAction} className="card mt-4 space-y-3">
          <h2 className="font-semibold">Declarar pago de factura</h2>
          <p className="text-sm text-white/60">
            Paga por transferencia, ATH Movil o efectivo, luego declara el
            metodo. El contratista debe confirmar que recibio el pago.
          </p>
          <input type="hidden" name="requestId" value={req.id} />
          <select className="input" name="paymentMethod" defaultValue="transfer">
            <option value="transfer">Transferencia bancaria</option>
            <option value="ath">ATH Movil</option>
            <option value="cash">Efectivo / en persona</option>
          </select>
          <button className="btn-primary" type="submit">
            Ya pague {money(quoteTotal(req.quote))}
          </button>
        </form>
      )}

      {isOwner && req.invoiceStatus === "awaiting_confirmation" && (
        <p className="card mt-4 text-sm text-white/70">
          Pago declarado. Esperando confirmacion del contratista en el
          Dashboard.
        </p>
      )}

      {(isOwner || isContractor) &&
        req.status === "in_progress" &&
        req.invoiceStatus === "paid" && (
          <form action={completeRequestAction} className="mt-3">
            <input type="hidden" name="requestId" value={req.id} />
            <button className="btn-ghost" type="submit">
              Marcar completada
            </button>
          </form>
        )}

      {isContractor && (req.status === "open" || req.status === "quoted") && (
        <form action={submitQuoteAction} className="card mt-4 space-y-3">
          <h2 className="font-semibold">Enviar cotizacion</h2>
          <input type="hidden" name="requestId" value={req.id} />
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="label">Mano de obra</label>
              <input className="input" name="labor" type="number" step="0.01" defaultValue={req.quote?.labor || 0} />
            </div>
            <div>
              <label className="label">Materiales</label>
              <input className="input" name="materials" type="number" step="0.01" defaultValue={req.quote?.materials || 0} />
            </div>
            <div>
              <label className="label">Viaje</label>
              <input className="input" name="travel" type="number" step="0.01" defaultValue={req.quote?.travel || 0} />
            </div>
            <div>
              <label className="label">Peajes</label>
              <input className="input" name="tolls" type="number" step="0.01" defaultValue={req.quote?.tolls || 0} />
            </div>
          </div>
          <div>
            <label className="label">Notas</label>
            <textarea className="input" name="notes" defaultValue={req.quote?.notes || ""} />
          </div>
          <button className="btn-primary" type="submit">
            Enviar cotizacion
          </button>
        </form>
      )}
    </div>
  );
}