"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Search, ChevronDown, RotateCcw } from "lucide-react";
import { Plus } from "lucide-react";
import HeaderAgenda from "@/components/agenda/HeaderAgenda";
import FooterAgenda from "@/components/agenda/FooterAgenda";

export default function ProcedimentoPage() {
  const pathname = usePathname();
  const router = useRouter();
  const [bloqueio, setBloqueio] = useState(false);

  const isAg = pathname?.startsWith("/agendamento");
  const isPr = pathname?.startsWith("/procedimento");
  const isFi = pathname?.startsWith("/financeiro");
  const tab = (active: boolean, extra = "") =>
    `px-4 py-1.5 text-[13px] border ${
      active
        ? "border-sky-500 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 font-medium"
        : "text-muted-foreground hover:bg-muted border-border"
    } ${extra}`;

  return (
    <div className="w-full min-h-screen flex flex-col bg-background">
      {/* HEADER */}
      <HeaderAgenda />

      {/* CORPO */}
      <main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-grow">
        {/* ATENDIMENTOS */}
        <section className="space-y-6">
          {/* Selo Atendimento com + dentro da bolinha */}
          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
              <Plus className="h-3 w-3" strokeWidth={2} />
            </span>
            <span className="text-foreground">Atendimento</span>
          </div>

          {/* Traço separador */}
          <div className="border-b border-border" />

          {/* PROCEDIMENTOS */}
          <div className="space-y-1">
            <Label className="text-[13px] text-foreground/80">
              Procedimentos
            </Label>
            <div className="relative">
              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar"
                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
              />
              <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            </div>
          </div>

          {/* Traço separador */}
          <div className="border-b border-border" />

          {/* OUTRAS DESPESAS */}
          <div className="space-y-1">
            <Label className="text-[13px] text-foreground/80">
              Outras despesas
            </Label>
            <div className="relative">
              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar"
                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
              />
              <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            </div>
          </div>
        </section>
      </main>

      {/* RODAPÉ FIXO */}
      <FooterAgenda />
    </div>
  );
}