'use client';

import React, { useState } from 'react';
import { Product } from '@/types';
import Link from 'next/link';
import { CheckCircle2, AlertTriangle, ArrowRight, BatteryMedium } from 'lucide-react';

export default function CompatibilityChecker() {
  const [vehicleType, setVehicleType] = useState('scooter');
  const [selectedBrand, setSelectedBrand] = useState('');
  const [selectedModel, setSelectedModel] = useState('');
  const [matchingBatteries, setMatchingBatteries] = useState<any[] | null>(null);
  const [isSearching, setIsSearching] = useState(false);

  const handleCheck = () => {
    setIsSearching(true);
    // Simulating response against sample models seeded in database
    setTimeout(() => {
      setIsSearching(false);
      setMatchingBatteries([
        {
          id: 1,
          name: 'Voltix Pro 48V 30Ah LiFePO4 Scooter Battery',
          slug: 'voltix-pro-48v-30ah-lifepo4',
          price: '₹19,999',
          fitment: '100% Direct Plug & Play',
          connector: 'Anderson SB50 (Matching OEM harness)'
        }
      ]);
    }, 400);
  };

  return (
    <div className="bg-gradient-to-br from-emerald-900 to-slate-900 text-white p-6 sm:p-10 rounded-2xl shadow-xl my-8">
      <div className="max-w-3xl">
        <span className="inline-block bg-emerald-500/20 text-emerald-400 text-xs uppercase tracking-wider font-semibold px-3 py-1 rounded-full mb-3">
          Vehicle Compatibility Engine
        </span>
        <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">
          Find the Exact Battery Engineered for Your EV
        </h2>
        <p className="mt-2 text-sm text-slate-300">
          EV battery compatibility requires precise matching of voltage thresholds, BMS discharge limits, physical dimensions, and plug types. Never guess—let our verified fitment checker match your vehicle.
        </p>

        {/* Dropdown selectors */}
        <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Vehicle Type</label>
            <select
              value={vehicleType}
              onChange={(e) => setVehicleType(e.target.value)}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-emerald-500"
            >
              <option value="scooter">Electric Scooter</option>
              <option value="bike">Electric Bike / Motorcycle</option>
              <option value="rickshaw">Commercial E-Rickshaw</option>
            </select>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Brand / Make</label>
            <select
              value={selectedBrand}
              onChange={(e) => setSelectedBrand(e.target.value)}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-emerald-500"
            >
              <option value="">Select Brand</option>
              <option value="hero">Hero Electric</option>
              <option value="ather">Ather Energy</option>
              <option value="ola">Ola Electric</option>
              <option value="tvs">TVS iQube</option>
              <option value="bajaj">Bajaj Chetak</option>
            </select>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Vehicle Model</label>
            <select
              value={selectedModel}
              onChange={(e) => setSelectedModel(e.target.value)}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-emerald-500"
            >
              <option value="">Select Model</option>
              <option value="optima">Optima CX Dual Battery</option>
              <option value="nyx">Photon / NYX</option>
              <option value="ather450">450X Gen 3</option>
              <option value="s1pro">S1 Pro Gen 2</option>
            </select>
          </div>
        </div>

        <button
          onClick={handleCheck}
          disabled={!selectedModel || isSearching}
          className="mt-5 w-full sm:w-auto inline-flex items-center justify-center bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-700 text-white font-semibold text-sm px-6 py-2.5 rounded-lg transition"
        >
          {isSearching ? 'Verifying Specs...' : 'Check Compatible Batteries'}
          <ArrowRight className="w-4 h-4 ml-2" />
        </button>

        {/* Results Box */}
        {matchingBatteries && (
          <div className="mt-6 bg-slate-800/80 border border-emerald-500/40 p-4 rounded-xl">
            <div className="flex items-center space-x-2 text-emerald-400 font-semibold text-sm mb-3">
              <CheckCircle2 className="w-5 h-5" />
              <span>Verified Direct Compatibility Found:</span>
            </div>
            {matchingBatteries.map((b) => (
              <div key={b.id} className="flex flex-col sm:flex-row sm:items-center justify-between bg-slate-900/60 p-3 rounded-lg border border-slate-700">
                <div>
                  <h4 className="font-semibold text-white text-sm">{b.name}</h4>
                  <div className="flex items-center space-x-3 text-xs text-slate-400 mt-1">
                    <span className="text-emerald-400 font-medium">{b.fitment}</span>
                    <span>•</span>
                    <span>{b.connector}</span>
                  </div>
                </div>
                <div className="mt-3 sm:mt-0 flex items-center space-x-4">
                  <span className="text-emerald-400 font-bold">{b.price}</span>
                  <Link
                    href={`/products/${b.slug}`}
                    className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-3 py-1.5 rounded-md transition"
                  >
                    View Specs
                  </Link>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}