import type { Metadata } from "next";
import Link from "next/link";
import { prisma } from "@/lib/db";
import { siteConfig } from "@/lib/config";
import { formatPrice } from "@/lib/format";
import { RepairForm } from "@/components/repair/RepairForm";

export const metadata: Metadata = {
  title: "Book a repair technician",
  description:
    "Book an expert technician to repair your laptop, desktop, monitor, TV or components. Carry-in or home visit, upfront estimates, no fix–no fee diagnosis.",
};

export default async function RepairPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const sp = await searchParams;
  const preselected = (Array.isArray(sp.service) ? sp.service[0] : sp.service) ?? "";

  const [services, technicians, categories] = await Promise.all([
    prisma.repairService.findMany({
      where: { active: true },
      orderBy: { sortOrder: "asc" },
    }),
    prisma.technician.findMany({
      where: { active: true },
      orderBy: { sortOrder: "asc" },
    }),
    prisma.category.findMany({
      orderBy: { sortOrder: "asc" },
      select: { name: true },
    }),
  ]);

  const steps = [
    { icon: "📝", title: "Book online", text: "Tell us the device and the issue." },
    { icon: "🔍", title: "Diagnosis & quote", text: "We inspect and share an upfront estimate." },
    { icon: "🛠️", title: "Repaired & returned", text: "Pay after the fix — carry-in or home visit." },
  ];

  return (
    <div className="mx-auto max-w-5xl px-4 py-8">
      {/* Hero */}
      <div className="rounded-2xl bg-gradient-to-r from-brand-700 to-brand-950 px-6 py-10 text-white sm:px-10">
        <span className="inline-block rounded-full bg-white/15 px-3 py-1 text-xs font-semibold">
          🛠️ Expert electronics repair
        </span>
        <h1 className="mt-3 text-2xl font-bold sm:text-3xl">
          Book a technician for your repair
        </h1>
        <p className="mt-2 max-w-xl text-brand-100">
          Laptops, desktops, monitors, TVs, sound systems and components — fixed by
          certified technicians. Carry-in or home visit, with upfront estimates.
        </p>
        <a
          href="#book"
          className="mt-5 inline-block rounded-lg bg-white px-5 py-3 text-sm font-bold text-brand-700 hover:bg-brand-50"
        >
          Book now
        </a>
      </div>

      {/* How it works */}
      <div className="mt-8 grid gap-4 sm:grid-cols-3">
        {steps.map((s, i) => (
          <div key={s.title} className="rounded-xl border border-slate-200 bg-white p-5">
            <div className="text-2xl">{s.icon}</div>
            <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
              Step {i + 1}
            </p>
            <p className="font-semibold text-slate-800">{s.title}</p>
            <p className="text-sm text-slate-500">{s.text}</p>
          </div>
        ))}
      </div>

      {/* Services */}
      {services.length > 0 ? (
        <div className="mt-10">
          <h2 className="text-lg font-bold text-slate-900">Popular repair services</h2>
          <p className="text-sm text-slate-500">
            Prices are starting estimates; final quote after diagnosis.
          </p>
          <div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((s) => (
              <a
                key={s.id}
                href={`/repair?service=${s.id}#book`}
                className="flex flex-col rounded-xl border border-slate-200 bg-white p-4 transition hover:border-brand-300 hover:shadow-sm"
              >
                <div className="text-2xl">{s.icon}</div>
                <p className="mt-2 font-semibold text-slate-800">{s.name}</p>
                <p className="mt-0.5 flex-1 text-xs text-slate-500">{s.description}</p>
                <div className="mt-3 flex items-center justify-between text-sm">
                  <span className="font-bold text-brand-700">
                    from {formatPrice(s.startingPrice)}
                  </span>
                  {s.estimatedTime ? (
                    <span className="text-xs text-slate-400">⏱ {s.estimatedTime}</span>
                  ) : null}
                </div>
              </a>
            ))}
          </div>
        </div>
      ) : null}

      {/* Technicians */}
      {technicians.length > 0 ? (
        <div className="mt-10">
          <h2 className="text-lg font-bold text-slate-900">Meet our technicians</h2>
          <div className="mt-4 grid gap-3 sm:grid-cols-3">
            {technicians.map((t) => (
              <div key={t.id} className="rounded-xl border border-slate-200 bg-white p-5 text-center">
                <div className="mx-auto grid h-16 w-16 place-items-center overflow-hidden rounded-full bg-brand-100 text-2xl font-bold text-brand-700">
                  {t.photo ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={t.photo} alt={t.name} className="h-full w-full object-cover" />
                  ) : (
                    t.name.charAt(0)
                  )}
                </div>
                <p className="mt-3 font-semibold text-slate-800">{t.name}</p>
                {t.specialization ? (
                  <p className="text-xs font-medium text-brand-600">{t.specialization}</p>
                ) : null}
                {t.bio ? <p className="mt-1 text-xs text-slate-500">{t.bio}</p> : null}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {/* Booking form */}
      <div id="book" className="mt-12 scroll-mt-28">
        <h2 className="mb-4 text-lg font-bold text-slate-900">Book your repair</h2>
        <RepairForm
          services={services.map((s) => ({
            id: s.id,
            name: s.name,
            startingPrice: s.startingPrice,
            icon: s.icon,
          }))}
          deviceTypes={categories.map((c) => c.name)}
          defaultServiceId={preselected}
        />
      </div>

      <p className="mt-6 text-center text-sm text-slate-500">
        Prefer to talk? Call{" "}
        <a href={`tel:${siteConfig.phone}`} className="font-medium text-brand-600">
          {siteConfig.phone}
        </a>{" "}
        or{" "}
        <a
          href={`https://wa.me/${siteConfig.whatsapp}`}
          target="_blank"
          rel="noopener noreferrer"
          className="font-medium text-brand-600"
        >
          message us on WhatsApp
        </a>
        .
      </p>
    </div>
  );
}