import { prisma } from "@/lib/db";
import { createService, updateService, deleteService } from "@/app/admin/actions";

export const dynamic = "force-dynamic";

const inputClass =
  "mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm";
const labelClass = "text-xs font-medium text-slate-500";

export default async function AdminRepairServicesPage() {
  const services = await prisma.repairService.findMany({
    orderBy: { sortOrder: "asc" },
    include: { _count: { select: { bookings: true } } },
  });

  return (
    <div className="space-y-5">
      <div>
        <h2 className="text-lg font-bold text-slate-900">Repair services</h2>
        <p className="text-sm text-slate-500">
          The services and starting prices shown on the repair page.
        </p>
      </div>

      {/* Create */}
      <form
        action={createService}
        className="rounded-xl border border-dashed border-brand-300 bg-brand-50/40 p-5"
      >
        <h3 className="text-sm font-bold text-slate-700">Add a service</h3>
        <div className="mt-3 grid gap-3 sm:grid-cols-2">
          <label className="block">
            <span className={labelClass}>Name *</span>
            <input name="name" required className={inputClass} />
          </label>
          <label className="block">
            <span className={labelClass}>Icon (emoji)</span>
            <input name="icon" placeholder="🛠️" className={inputClass} />
          </label>
          <label className="block">
            <span className={labelClass}>Starting price (₹)</span>
            <input type="number" name="startingPrice" min={0} defaultValue={0} className={inputClass} />
          </label>
          <label className="block">
            <span className={labelClass}>Estimated time</span>
            <input name="estimatedTime" placeholder="e.g. 1–2 days" className={inputClass} />
          </label>
          <label className="block sm:col-span-2">
            <span className={labelClass}>Description</span>
            <textarea name="description" rows={2} className={inputClass} />
          </label>
        </div>
        <label className="mt-3 flex items-center gap-2 text-sm">
          <input type="checkbox" name="active" defaultChecked />
          <span className="font-medium text-slate-700">Active (shown to customers)</span>
        </label>
        <button className="mt-3 rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">
          Add service
        </button>
      </form>

      {/* Existing */}
      <div className="grid gap-4 md:grid-cols-2">
        {services.map((s) => (
          <div key={s.id} className="rounded-xl border border-slate-200 bg-white p-5">
            <form action={updateService}>
              <input type="hidden" name="id" value={s.id} />
              <div className="flex items-center justify-between">
                <span className="text-2xl">{s.icon}</span>
                <span className="text-xs text-slate-400">{s._count.bookings} bookings</span>
              </div>
              <div className="mt-2 grid gap-3 sm:grid-cols-2">
                <label className="block sm:col-span-2">
                  <span className={labelClass}>Name</span>
                  <input name="name" defaultValue={s.name} className={inputClass} />
                </label>
                <label className="block">
                  <span className={labelClass}>Icon</span>
                  <input name="icon" defaultValue={s.icon ?? ""} className={inputClass} />
                </label>
                <label className="block">
                  <span className={labelClass}>Starting price (₹)</span>
                  <input
                    type="number"
                    name="startingPrice"
                    min={0}
                    defaultValue={s.startingPrice}
                    className={inputClass}
                  />
                </label>
                <label className="block sm:col-span-2">
                  <span className={labelClass}>Estimated time</span>
                  <input
                    name="estimatedTime"
                    defaultValue={s.estimatedTime ?? ""}
                    className={inputClass}
                  />
                </label>
                <label className="block sm:col-span-2">
                  <span className={labelClass}>Description</span>
                  <textarea
                    name="description"
                    rows={2}
                    defaultValue={s.description}
                    className={inputClass}
                  />
                </label>
              </div>
              <label className="mt-3 flex items-center gap-2 text-sm">
                <input type="checkbox" name="active" defaultChecked={s.active} />
                <span className="font-medium text-slate-700">Active</span>
              </label>
              <button className="mt-3 rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">
                Save
              </button>
            </form>
            <form action={deleteService} className="mt-2">
              <input type="hidden" name="id" value={s.id} />
              <button className="text-xs font-medium text-rose-600 hover:underline">
                Delete service
              </button>
            </form>
          </div>
        ))}
      </div>
    </div>
  );
}