import { prisma } from "@/lib/db";
import {
  createTechnician,
  updateTechnician,
  deleteTechnician,
} 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";
const fileClass =
  "mt-1 block w-full text-sm text-slate-500 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-50 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-brand-700 hover:file:bg-brand-100";

export default async function AdminTechniciansPage() {
  const technicians = await prisma.technician.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">Technicians</h2>
        <p className="text-sm text-slate-500">
          Manage the technicians shown on the repair page and assignable to
          bookings.
        </p>
      </div>

      {/* Create */}
      <form
        action={createTechnician}
        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 technician</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}>Phone</span>
            <input name="phone" className={inputClass} />
          </label>
          <label className="block">
            <span className={labelClass}>Specialization</span>
            <input name="specialization" placeholder="e.g. Laptops & PCs" className={inputClass} />
          </label>
          <label className="block">
            <span className={labelClass}>Photo</span>
            <input type="file" name="photo" accept="image/*" className={fileClass} />
          </label>
          <label className="block sm:col-span-2">
            <span className={labelClass}>Short bio</span>
            <textarea name="bio" 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 technician
        </button>
      </form>

      {/* Existing */}
      <div className="grid gap-4 md:grid-cols-2">
        {technicians.map((t) => (
          <div key={t.id} className="rounded-xl border border-slate-200 bg-white p-5">
            <form action={updateTechnician}>
              <input type="hidden" name="id" value={t.id} />
              <div className="flex items-center gap-3">
                <div className="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-100 text-lg font-bold text-brand-700">
                  {t.photo ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={t.photo} alt="" className="h-full w-full object-cover" />
                  ) : (
                    t.name.charAt(0)
                  )}
                </div>
                <div className="min-w-0 flex-1">
                  <input name="name" defaultValue={t.name} className={inputClass} />
                </div>
                <span className="shrink-0 text-xs text-slate-400">
                  {t._count.bookings} jobs
                </span>
              </div>

              <div className="mt-3 grid gap-3 sm:grid-cols-2">
                <label className="block">
                  <span className={labelClass}>Phone</span>
                  <input name="phone" defaultValue={t.phone ?? ""} className={inputClass} />
                </label>
                <label className="block">
                  <span className={labelClass}>Specialization</span>
                  <input
                    name="specialization"
                    defaultValue={t.specialization ?? ""}
                    className={inputClass}
                  />
                </label>
                <label className="block sm:col-span-2">
                  <span className={labelClass}>Bio</span>
                  <textarea name="bio" rows={2} defaultValue={t.bio} className={inputClass} />
                </label>
                <label className="block sm:col-span-2">
                  <span className={labelClass}>Replace photo</span>
                  <input type="file" name="photo" accept="image/*" className={fileClass} />
                </label>
              </div>

              <label className="mt-3 flex items-center gap-2 text-sm">
                <input type="checkbox" name="active" defaultChecked={t.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={deleteTechnician} className="mt-2">
              <input type="hidden" name="id" value={t.id} />
              <button className="text-xs font-medium text-rose-600 hover:underline">
                Delete technician
              </button>
            </form>
          </div>
        ))}
      </div>
    </div>
  );
}