/**
 * Customer Filters Component
 * Search bar and stats cards for customer management
 */

"use client";

import { Search, X, Users, UserPlus, Calendar } from "lucide-react";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import type { CustomerFiltersProps } from "./types";

export default function CustomerFilters({
  lang,
  searchQuery,
  onSearchChange,
  totalCustomers,
  returningCustomers,
  avgBookings,
  onAddCustomer,
}: CustomerFiltersProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  return (
    <>
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">{dt.customers}</h2>
          <p className="text-slate-600 mt-1">{dt.customersDesc}</p>
        </div>
        <button
          onClick={onAddCustomer}
          className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-brand-green to-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-green/25 hover:shadow-brand-green/40 hover:-translate-y-0.5 transition-all"
        >
          <UserPlus className="w-4 h-4" />
          <span>{dt.addCustomer}</span>
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 sm:grid-cols-3">
        <div className="rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200/50 p-5">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg">
              <Users className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                {dt.totalCustomers}
              </p>
              <p className="text-2xl font-bold text-emerald-700">
                {totalCustomers}
              </p>
            </div>
          </div>
        </div>
        <div className="rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/50 p-5">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg">
              <UserPlus className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                {dt.returningCustomers}
              </p>
              <p className="text-2xl font-bold text-blue-700">
                {returningCustomers}
              </p>
            </div>
          </div>
        </div>
        <div className="rounded-2xl bg-gradient-to-br from-violet-50 to-purple-50 border border-violet-200/50 p-5">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 shadow-lg">
              <Calendar className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                {dt.avgBookingsPerCustomer}
              </p>
              <p className="text-2xl font-bold text-violet-700">
                {avgBookings}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Search */}
      <div className="relative">
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          placeholder={dt.searchCustomers}
          className="w-full h-12 pl-12 pr-4 rounded-xl border border-slate-200 bg-white text-sm placeholder-slate-400 transition-all focus:border-brand-green focus:ring-2 focus:ring-brand-green/20 focus:outline-none"
        />
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
        {searchQuery && (
          <button
            onClick={() => onSearchChange("")}
            className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 hover:text-slate-600"
          >
            <X className="w-5 h-5" />
          </button>
        )}
      </div>
    </>
  );
}