import React from "react";
import { Search, MapPin, Calendar, Clock, Users, Briefcase, Hourglass } from "lucide-react";
import { Button } from "@/components/ui/button";

const COMMON_ROLES = [
  "Bartender", "Prep Cook", "Line Cook", "Server", "Dishwasher",
  "Host", "Sous Chef", "Executive Chef", "Pastry Chef", "Barista",
  "Food Runner", "Busser", "Event Staff", "Security Guard",
  "Janitor", "Facilities Technician", "Cashier", "Concessions"
];

const COMMON_CITIES = [
  "San Francisco", "Oakland", "San Jose", "Los Angeles", "Sacramento",
  "Fremont", "Berkeley", "Palo Alto", "Napa", "Santa Clara"
];

export default function StaffingSearchBar({ search, setSearch }) {
  const update = (field, value) => setSearch(prev => ({ ...prev, [field]: value }));

  return (
    <div className="bg-white rounded-2xl shadow-xl border border-slate-200 p-2 hover:shadow-2xl transition-shadow">
      <div className="flex flex-col lg:flex-row items-stretch gap-1">
        {/* Role */}
        <div className="flex-1 flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
          <Briefcase className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Role Needed</label>
            <input
              list="role-list"
              placeholder="e.g. Bartender"
              value={search.role}
              onChange={(e) => update("role", e.target.value)}
              className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent placeholder:text-slate-400"
            />
            <datalist id="role-list">
              {COMMON_ROLES.map(r => <option key={r} value={r} />)}
            </datalist>
          </div>
        </div>

        <div className="hidden lg:block w-px bg-slate-200 my-2" />

        {/* Location */}
        <div className="flex-1 flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
          <MapPin className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Location</label>
            <input
              list="city-list"
              placeholder="e.g. San Francisco"
              value={search.location}
              onChange={(e) => update("location", e.target.value)}
              className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent placeholder:text-slate-400"
            />
            <datalist id="city-list">
              {COMMON_CITIES.map(c => <option key={c} value={c} />)}
            </datalist>
          </div>
        </div>

        <div className="hidden lg:block w-px bg-slate-200 my-2" />

        {/* Date */}
        <div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
          <Calendar className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Date</label>
            <input
              type="date"
              value={search.date}
              onChange={(e) => update("date", e.target.value)}
              className="text-sm font-semibold text-slate-800 outline-none bg-transparent"
            />
          </div>
        </div>

        <div className="hidden lg:block w-px bg-slate-200 my-2" />

        {/* Start Time */}
        <div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
          <Clock className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Start Time</label>
            <input
              type="time"
              value={search.startTime}
              onChange={(e) => update("startTime", e.target.value)}
              className="text-sm font-semibold text-slate-800 outline-none bg-transparent"
            />
          </div>
        </div>

        <div className="hidden lg:block w-px bg-slate-200 my-2" />

        {/* Duration */}
        <div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors w-28">
          <Hourglass className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Hours</label>
            <input
              type="number"
              min="1"
              max="24"
              value={search.duration}
              onChange={(e) => update("duration", e.target.value)}
              className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent"
            />
          </div>
        </div>

        <div className="hidden lg:block w-px bg-slate-200 my-2" />

        {/* Headcount */}
        <div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors w-28">
          <Users className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
          <div className="flex-1 min-w-0">
            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Staff</label>
            <input
              type="number"
              min="1"
              max="500"
              value={search.headcount}
              onChange={(e) => update("headcount", e.target.value)}
              className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent"
            />
          </div>
        </div>

        {/* Search Button */}
        <Button
          className="bg-gradient-to-r from-[#0039A6] to-[#0047C4] text-white font-bold px-6 rounded-xl shadow-md hover:shadow-lg flex items-center gap-2"
        >
          <Search className="w-5 h-5" />
          <span className="hidden lg:inline">Search</span>
        </Button>
      </div>
    </div>
  );
}