import Link from "next/link";
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { money } from "@/lib/fees";
import { paymentMethodLabel } from "@/lib/platform";
import {
  openDisputeAction,
  payOrderAction,
  confirmOrderPaymentAction,
  receiveOrderAction,
  shipOrderAction,
} from "@/server/actions/classifieds";
import { submitVerificationAction } from "@/server/actions/chat";
import { ReviewForm } from "@/components/ReviewForm";

export default async function DashboardPage({
  searchParams,
}: {
  searchParams: Promise<{
    order?: string;
    reviewOrder?: string;
    reviewRequest?: string;
    verify?: string;
  }>;
}) {
  const session = await auth();
  if (!session?.user?.email) redirect("/login");
  const sp = await searchParams;
  const email = session.user.email;

  const [orders, requests, listings, verifications, user] = await Promise.all([
    prisma.order.findMany({
      where: { OR: [{ buyerEmail: email }, { sellerEmail: email }] },
      orderBy: { createdAt: "desc" },
      take: 20,
    }),
    prisma.serviceRequest.count({ where: { ownerEmail: email } }),
    prisma.listing.count({ where: { sellerEmail: email } }),
    prisma.verification.findMany({
      where: { email },
      orderBy: { date: "desc" },
      take: 3,
    }),
    prisma.user.findUnique({
      where: { email },
      include: { contractorProfile: true },
    }),
  ]);

  const paid = orders.filter((o) => o.status === "paid" || o.status === "completed");
  const gmv = paid.reduce((s, o) => s + o.total, 0);

  return (
    <div>
      <h1 className="text-3xl font-semibold">Dashboard</h1>
      <p className="text-white/60">Hola, {session.user.name}</p>

      {!user?.isVerified && (
        <div className="card mt-4 border-[var(--lime)]/30">
          <p className="font-semibold">Verificacion pendiente</p>
          <p className="mt-1 text-sm text-white/60">
            Completa tu verificacion para operar con mas confianza.
          </p>
          <form
            action={submitVerificationAction}
            className="mt-4 space-y-3"
          >
            <div>
              <label className="label">ID oficial</label>
              <input className="input" type="file" name="idDoc" required />
            </div>
            <div>
              <label className="label">Antecedentes (opcional)</label>
              <input className="input" type="file" name="backgroundDoc" />
            </div>
            <button className="btn-primary" type="submit">
              Enviar verificacion
            </button>
          </form>
          {sp.verify && (
            <p className="mt-2 text-sm text-[var(--lime)]">
              Documentos enviados — en revision.
            </p>
          )}
        </div>
      )}

      <div className="mt-6 grid gap-4 sm:grid-cols-3">
        <div className="card">
          <p className="text-sm text-white/50">Ordenes</p>
          <p className="text-2xl font-semibold">{orders.length}</p>
        </div>
        <div className="card">
          <p className="text-sm text-white/50">Solicitudes / Listings</p>
          <p className="text-2xl font-semibold">
            {requests} / {listings}
          </p>
        </div>
        <div className="card">
          <p className="text-sm text-white/50">GMV personal</p>
          <p className="text-2xl font-semibold text-[var(--lime)]">{money(gmv)}</p>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-2.5 sm:grid-cols-4">
        <Link href="/solicitudes" className="dash-link-card">
          <span className="dash-link-card__mark">SO</span>
          <span className="dash-link-card__name">Solicitudes</span>
        </Link>
        <Link href="/clasificados" className="dash-link-card">
          <span className="dash-link-card__mark">CL</span>
          <span className="dash-link-card__name">Clasificados</span>
        </Link>
        <Link href="/configuracion" className="dash-link-card">
          <span className="dash-link-card__mark">CF</span>
          <span className="dash-link-card__name">Configuracion</span>
        </Link>
        {session.user.role === "admin" && (
          <Link href="/admin" className="dash-link-card is-accent">
            <span className="dash-link-card__mark">AD</span>
            <span className="dash-link-card__name">Admin</span>
          </Link>
        )}
      </div>

      {(sp.reviewOrder || sp.reviewRequest) && (
        <ReviewForm
          orderId={sp.reviewOrder}
          requestId={sp.reviewRequest}
        />
      )}

      <h2 className="mt-8 text-xl font-semibold">Ordenes</h2>
      <div className="mt-3 space-y-3">
        {orders.map((o) => {
          const isBuyer = o.buyerEmail === email;
          const isSeller = o.sellerEmail === email;
          return (
            <div key={o.id} className="card">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <p className="font-semibold">
                    #{o.id} · {o.title}
                  </p>
                  <p className="text-sm text-white/60">
                    {o.type} · {money(o.total)} · {o.status}
                  </p>
                </div>
                <span className="badge">
                  {paymentMethodLabel(o.paymentMethod)}
                </span>
              </div>
              <div className="mt-3 flex flex-wrap gap-2">
                {isBuyer && o.status === "pending_payment" && (
                  <form action={payOrderAction} className="flex flex-wrap gap-2">
                    <input type="hidden" name="orderId" value={o.id} />
                    <select
                      className="input"
                      name="paymentMethod"
                      defaultValue={o.paymentMethod || "transfer"}
                    >
                      <option value="transfer">Transferencia</option>
                      <option value="ath">ATH Movil</option>
                      <option value="cash">Efectivo</option>
                    </select>
                    <button className="btn-primary" type="submit">
                      Ya pague
                    </button>
                  </form>
                )}
                {isBuyer && o.status === "payment_submitted" && (
                  <p className="text-sm text-white/60">
                    Pago declarado — esperando confirmacion del vendedor.
                  </p>
                )}
                {isSeller &&
                  (o.status === "payment_submitted" ||
                    o.status === "pending_payment") && (
                    <form action={confirmOrderPaymentAction}>
                      <input type="hidden" name="orderId" value={o.id} />
                      <button className="btn-primary" type="submit">
                        Confirmar pago recibido
                      </button>
                    </form>
                  )}
                {isSeller && o.status === "paid" && (
                  <form action={shipOrderAction}>
                    <input type="hidden" name="orderId" value={o.id} />
                    <button className="btn-ghost" type="submit">
                      Marcar enviado
                    </button>
                  </form>
                )}
                {isBuyer && o.status === "shipped" && (
                  <form action={receiveOrderAction}>
                    <input type="hidden" name="orderId" value={o.id} />
                    <button className="btn-primary" type="submit">
                      Confirmar recibido
                    </button>
                  </form>
                )}
                {(isBuyer || isSeller) &&
                  ["paid", "shipped", "completed"].includes(o.status) && (
                    <form action={openDisputeAction} className="flex gap-2">
                      <input type="hidden" name="orderId" value={o.id} />
                      <input
                        className="input"
                        name="title"
                        placeholder="Motivo disputa"
                        defaultValue={`Disputa orden ${o.id}`}
                      />
                      <button className="btn-ghost" type="submit">
                        Disputa
                      </button>
                    </form>
                  )}
                <Link
                  href={`/chat?key=${encodeURIComponent(`order::${o.id}`)}&title=${encodeURIComponent(`Orden ${o.id}`)}`}
                  className="btn-ghost"
                >
                  Chat
                </Link>
              </div>
            </div>
          );
        })}
        {!orders.length && (
          <p className="text-white/50">Sin ordenes aun.</p>
        )}
      </div>

      {verifications.length > 0 && (
        <div className="mt-8">
          <h2 className="text-xl font-semibold">Verificaciones</h2>
          <ul className="mt-3 space-y-2 text-sm text-white/70">
            {verifications.map((v) => (
              <li key={v.id} className="card">
                {v.status} · {new Date(v.date).toLocaleDateString()} · {v.docs}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}