'use client';

import React, { useState } from 'react';
import ProductCard from '@/components/ProductCard';
import { Filter, Search, SlidersHorizontal } from 'lucide-react';
import { Product } from '@/types';

const allProducts: Product[] = [
  {
    id: 1,
    name: 'Voltix Pro 48V 30Ah LiFePO4 Scooter Battery',
    slug: 'voltix-pro-48v-30ah-lifepo4',
    sku: 'BAT-48V-30AH-LFP',
    price: '22500.00',
    discount_price: '19999.00',
    final_price: '19999.00',
    stock: 25,
    voltage: '48V',
    capacity_ah: '30.00',
    nominal_energy_kwh: '1.44',
    chemistry: 'LFP',
    warranty_months: 36,
    category: 1,
    brand: 1,
    brand_name: 'Voltix Energy',
    images: []
  },
  {
    id: 2,
    name: 'NexCell Ultra 60V 42Ah Long-Range NMC Battery',
    slug: 'nexcell-ultra-60v-42ah-nmc',
    sku: 'BAT-60V-42AH-NMC',
    price: '34999.00',
    discount_price: '31499.00',
    final_price: '31499.00',
    stock: 14,
    voltage: '60V',
    capacity_ah: '42.00',
    nominal_energy_kwh: '2.52',
    chemistry: 'NMC',
    warranty_months: 24,
    category: 1,
    brand: 2,
    brand_name: 'NexCell Power',
    images: []
  },
  {
    id: 3,
    name: 'Voltix HeavyHaul 72V 100Ah Commercial E-Rickshaw Battery',
    slug: 'voltix-heavyhaul-72v-100ah',
    sku: 'BAT-72V-100AH-LFP',
    price: '78000.00',
    discount_price: '72999.00',
    final_price: '72999.00',
    stock: 8,
    voltage: '72V',
    capacity_ah: '100.00',
    nominal_energy_kwh: '7.20',
    chemistry: 'LFP',
    warranty_months: 36,
    category: 3,
    brand: 1,
    brand_name: 'Voltix Energy',
    images: []
  },
  {
    id: 4,
    name: 'Voltix Eco 48V 26Ah LiFePO4 E-Cycle / Bike Pack',
    slug: 'voltix-eco-48v-26ah-lifepo4',
    sku: 'BAT-48V-26AH-LFP',
    price: '16999.00',
    discount_price: null,
    final_price: '16999.00',
    stock: 18,
    voltage: '48V',
    capacity_ah: '26.00',
    nominal_energy_kwh: '1.24',
    chemistry: 'LFP',
    warranty_months: 24,
    category: 2,
    brand: 1,
    brand_name: 'Voltix Energy',
    images: []
  }
];

export default function ProductsPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedVoltage, setSelectedVoltage] = useState('ALL');
  const [selectedChemistry, setSelectedChemistry] = useState('ALL');

  const filteredProducts = allProducts.filter((p) => {
    const matchesSearch = p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                          p.voltage.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesVoltage = selectedVoltage === 'ALL' || p.voltage === selectedVoltage;
    const matchesChemistry = selectedChemistry === 'ALL' || p.chemistry === selectedChemistry;
    return matchesSearch && matchesVoltage && matchesChemistry;
  });

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">EV Battery Catalog</h1>
        <p className="text-slate-500 text-sm mt-1">
          Explore precision-engineered lithium packs rated for high continuous discharge and thermal resilience.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Sidebar Filters */}
        <aside className="bg-white p-5 rounded-xl border border-slate-200 h-fit space-y-6">
          <div className="flex items-center space-x-2 text-slate-900 font-bold pb-3 border-b border-slate-100">
            <SlidersHorizontal className="w-4 h-4 text-emerald-600" />
            <span>Refine Specifications</span>
          </div>

          {/* Search */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1.5">Keyword Search</label>
            <div className="relative">
              <input
                type="text"
                placeholder="e.g. 48V, NMC, LiFePO4..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-9 pr-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
              />
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
            </div>
          </div>

          {/* Voltage */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-2">Voltage Rating</label>
            <div className="space-y-1.5 text-xs text-slate-600">
              {['ALL', '48V', '60V', '72V'].map((volt) => (
                <label key={volt} className="flex items-center space-x-2 cursor-pointer">
                  <input
                    type="radio"
                    name="voltage"
                    checked={selectedVoltage === volt}
                    onChange={() => setSelectedVoltage(volt)}
                    className="text-emerald-600 focus:ring-emerald-500"
                  />
                  <span>{volt === 'ALL' ? 'All Voltages' : volt}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Battery Chemistry */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-2">Battery Chemistry</label>
            <div className="space-y-1.5 text-xs text-slate-600">
              {[
                { label: 'All Chemistries', value: 'ALL' },
                { label: 'LFP (LiFePO4) - Safe & High Cycles', value: 'LFP' },
                { label: 'NMC - Ultra Lightweight / High Density', value: 'NMC' }
              ].map((chem) => (
                <label key={chem.value} className="flex items-center space-x-2 cursor-pointer">
                  <input
                    type="radio"
                    name="chemistry"
                    checked={selectedChemistry === chem.value}
                    onChange={() => setSelectedChemistry(chem.value)}
                    className="text-emerald-600 focus:ring-emerald-500"
                  />
                  <span>{chem.label}</span>
                </label>
              ))}
            </div>
          </div>
        </aside>

        {/* Product Grid */}
        <section className="lg:col-span-3">
          <div className="flex items-center justify-between mb-4">
            <span className="text-sm text-slate-500">
              Showing <strong className="text-slate-800">{filteredProducts.length}</strong> batteries
            </span>
          </div>

          {filteredProducts.length === 0 ? (
            <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
              <p className="text-slate-500 text-sm">No batteries match your selected parameters.</p>
              <button
                onClick={() => { setSearchTerm(''); setSelectedVoltage('ALL'); setSelectedChemistry('ALL'); }}
                className="mt-3 text-xs text-emerald-600 font-semibold hover:underline"
              >
                Clear all filters
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredProducts.map((p) => (
                <ProductCard key={p.id} product={p} />
              ))}
            </div>
          )}
        </section>
      </div>
    </div>
  );
}