"use client"

import { useParams, useRouter } from "next/navigation"
import { Navbar } from "@/components/dashboard/navbar"
import { DoctorForm } from "@/components/dashboard/doctors/DoctorForm"
import { UserRound } from "lucide-react"

export default function EditDoctorPage() {
  const params = useParams()
  const router = useRouter()
  const id = typeof params.id === "string" ? params.id : ""

  if (!id) {
    return (
      <>
        <Navbar
          title="Edit Doctor"
          breadcrumbs={[
            { label: "Dashboard", href: "/dashboard" },
            { label: "Doctors", href: "/dashboard/doctors" },
            { label: "Edit" },
          ]}
        />
        <div className="p-6">
          <p className="text-sm text-muted-foreground font-sans">Invalid doctor link.</p>
        </div>
      </>
    )
  }

  return (
    <>
      <Navbar
        title="Edit Doctor"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Doctors", href: "/dashboard/doctors" },
          { label: "Edit" },
        ]}
      />

      <div className="p-6 flex flex-col gap-6">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <div className="flex items-center gap-2.5 mb-1">
              <h1 className="text-2xl font-bold text-foreground font-sans">Edit Doctor Profile</h1>
              <span
                className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold font-sans uppercase tracking-wider"
                style={{
                  background: "rgba(29,45,104,0.08)",
                  color: "var(--brand-navy)",
                  border: "1px solid rgba(29,45,104,0.15)",
                }}
              >
                <UserRound className="w-3 h-3" aria-hidden="true" />
                Doctors
              </span>
            </div>
            <p className="text-muted-foreground text-sm font-sans">
              Update profile sections, save as draft, or publish when everything is ready.
            </p>
          </div>
        </div>

        <DoctorForm doctorId={id} onSuccess={() => router.push("/dashboard/doctors")} />
      </div>
    </>
  )
}