'use client'

import { ChevronLeft, ChevronRight, Plus, CheckSquare, Copy, FileSpreadsheet, Printer, Plane } from 'lucide-react'
import type { Consultant, AppointmentType } from '@/lib/planning-types'

// ── Month pill labels (abbreviated) ──────────────────────────────────────────
const MONTH_PILLS = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']

// ── Props ─────────────────────────────────────────────────────────────────────

interface Props {
 year: number
 teamFilter: string
 consultantFilter: string
 typeFilter: string
 projectSearch: string
 teamCodes: string[]
 consultants: Consultant[]
 appointmentTypes: AppointmentType[]
 selectionMode: boolean
 travelFilter: boolean
 canCreate: boolean
 /** Mobile 2-week label, e.g. "KW 14–15 · 31.03 – 13.04.2025" */
 mobileWeekLabel?: string
 onYearChange: (y: number) => void
 onTeamChange: (t: string) => void
 onConsultantChange: (c: string) => void
 onTypeChange: (t: string) => void
 onProjectSearchChange: (s: string) => void
 onPrev: () => void
 onNext: () => void
 onToday: () => void
 onScrollToMonth: (m: number) => void  // 0-indexed
 onCreateClick: () => void
 onToggleSelectionMode: () => void
 onCopyWeekClick: () => void
 onToggleTravelFilter: () => void
 onExcelExport: () => void
 onPrintExport: () => void
}

const selectCls =
 'h-8 rounded border border-input bg-card text-[13px] text-foreground px-2' +
 ' focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary'

// ── Component ─────────────────────────────────────────────────────────────────

export default function PlanningToolbar({
 year,
 teamFilter, consultantFilter, typeFilter, projectSearch,
 teamCodes, consultants, appointmentTypes,
 selectionMode, travelFilter, canCreate, mobileWeekLabel,
 onYearChange,
 onTeamChange, onConsultantChange, onTypeChange, onProjectSearchChange,
 onPrev, onNext, onToday, onScrollToMonth,
 onCreateClick, onToggleSelectionMode, onCopyWeekClick,
 onToggleTravelFilter, onExcelExport, onPrintExport,
}: Props) {
 return (
  <div className="bg-card border-b border-input shrink-0">

   {/* ── Mobile nav bar (< sm) ─────────────────────────────────────────── */}
   <div className="flex sm:hidden items-center gap-1 px-3 py-1.5">
    <button
     onClick={onPrev}
     className="w-11 h-11 flex items-center justify-center rounded hover:bg-muted text-foreground transition-colors shrink-0"
     aria-label="Vorherige Woche"
    >
     <ChevronLeft size={22} />
    </button>

    <div className="flex-1 text-center">
     <p className="text-[13px] font-semibold text-foreground leading-tight">
      {mobileWeekLabel ?? String(year)}
     </p>
    </div>

    <button
     onClick={onToday}
     className="h-9 px-3 text-[12px] font-medium rounded border border-input hover:bg-muted text-foreground transition-colors shrink-0"
    >
     Heute
    </button>

    {canCreate && (
     <button
      onClick={onCreateClick}
      className="w-11 h-11 flex items-center justify-center rounded bg-primary text-white hover:bg-primary-dark transition-colors shrink-0"
      aria-label="Einsatz anlegen"
     >
      <Plus size={22} />
     </button>
    )}

    <button
     onClick={onNext}
     className="w-11 h-11 flex items-center justify-center rounded hover:bg-muted text-foreground transition-colors shrink-0"
     aria-label="Nächste Woche"
    >
     <ChevronRight size={22} />
    </button>
   </div>

   {/* ── Desktop nav bar (≥ sm) ────────────────────────────────────────── */}
   <div className="hidden sm:flex flex-wrap items-center gap-3 px-4 py-2.5">

    {/* Year navigation */}
    <div className="flex items-center gap-1">
     <button
      onClick={onPrev}
      className="w-7 h-7 flex items-center justify-center rounded hover:bg-muted text-foreground transition-colors"
      aria-label="Vorheriges Jahr"
     >
      <ChevronLeft size={16} />
     </button>
     <span className="min-w-[3rem] text-center text-[14px] font-semibold text-foreground select-none">
      {year}
     </span>
     <button
      onClick={onNext}
      className="w-7 h-7 flex items-center justify-center rounded hover:bg-muted text-foreground transition-colors"
      aria-label="Nächstes Jahr"
     >
      <ChevronRight size={16} />
     </button>
     <button
      onClick={onToday}
      className="h-7 px-3 text-[12px] font-medium rounded border border-input hover:bg-muted text-foreground transition-colors ml-1"
     >
      Heute
     </button>
    </div>

    <div className="h-5 w-px bg-input shrink-0" />

    {/* Team filter */}
    <select
     value={teamFilter}
     onChange={(e) => onTeamChange(e.target.value)}
     className={selectCls}
    >
     <option value="all">Alle Teams</option>
     {teamCodes.map((t) => <option key={t} value={t}>{t}</option>)}
    </select>

    {/* Consultant filter */}
    <select
     value={consultantFilter}
     onChange={(e) => onConsultantChange(e.target.value)}
     className={selectCls}
    >
     <option value="all">Alle Mitarbeiter</option>
     {consultants
      .filter((c) => teamFilter === 'all' || c.team_code === teamFilter)
      .map((c) => (
       <option key={c.id} value={c.id}>{c.display_name}</option>
      ))}
    </select>

    {/* Appointment type filter */}
    <select
     value={typeFilter}
     onChange={(e) => onTypeChange(e.target.value)}
     className={selectCls}
    >
     <option value="all">Alle Typen</option>
     {appointmentTypes.map((t) => (
      <option key={t.id} value={t.id}>{t.label}</option>
     ))}
    </select>

    {/* Project / supplier search */}
    <input
     type="text"
     placeholder="Projekt suchen…"
     value={projectSearch}
     onChange={(e) => onProjectSearchChange(e.target.value)}
     className={`${selectCls} w-40`}
    />

    {/* Right actions */}
    <div className="ml-auto flex items-center gap-2">
     {/* Travel filter */}
     <button
      onClick={onToggleTravelFilter}
      title="Nur Dienstreisen anzeigen"
      className={[
       'h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded border transition-colors',
       travelFilter
        ? 'bg-[#EEF5FB] border-primary text-primary'
        : 'border-input text-foreground hover:bg-muted',
      ].join(' ')}
     >
      <Plane size={13} />
      Dienstreise
     </button>

     <div className="h-5 w-px bg-input shrink-0" />

     {/* Excel export */}
     <button
      onClick={onExcelExport}
      title="Als Excel exportieren"
      className="h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded border border-input text-foreground hover:bg-muted transition-colors"
     >
      <FileSpreadsheet size={13} />
      Excel
     </button>

     {/* Print / PDF */}
     <button
      onClick={onPrintExport}
      title="Drucken / Als PDF speichern"
      className="h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded border border-input text-foreground hover:bg-muted transition-colors"
     >
      <Printer size={13} />
      Drucken
     </button>

     <div className="h-5 w-px bg-input shrink-0" />

     {/* Copy Week */}
     {canCreate && (
      <button
       onClick={onCopyWeekClick}
       className="h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded border border-input text-foreground hover:bg-muted transition-colors"
      >
       <Copy size={13} />
       Woche kopieren
      </button>
     )}

     {/* Selection mode toggle */}
     <button
      onClick={onToggleSelectionMode}
      className={[
       'h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded border transition-colors',
       selectionMode
        ? 'bg-[#EEF5FB] border-primary text-primary'
        : 'border-input text-foreground hover:bg-muted',
      ].join(' ')}
     >
      <CheckSquare size={13} />
      Auswahl
     </button>

     {/* Create */}
     {canCreate && (
      <button
       onClick={onCreateClick}
       className="h-8 px-3 flex items-center gap-1.5 text-[13px] font-medium rounded bg-primary text-white hover:bg-primary-dark transition-colors"
      >
       <Plus size={14} />
       Einsatz anlegen
      </button>
     )}
    </div>
   </div>

   {/* ── Month quick-nav pills (desktop only) ─────────────────────────── */}
   <div className="hidden sm:flex items-center gap-1 px-4 pb-2 overflow-x-auto">
    {MONTH_PILLS.map((label, i) => (
     <button
      key={i}
      onClick={() => onScrollToMonth(i)}
      className="shrink-0 h-6 px-2.5 text-[11px] font-medium rounded border border-input text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
     >
      {label}
     </button>
    ))}
   </div>

  </div>
 )
}