"use client"

import * as React from "react"
import { SlidersHorizontal, Check, TrendingUp } from "lucide-react"

interface VerificationOption { label: string; count: string | number; checked: boolean; disabled?: boolean }
interface IndustryOption { label: string; count: number; checked: boolean }
interface RegionChip { label: string; checked: boolean }
interface RecencyOption { label: string; checked: boolean }

interface FiltersData {
  title: string
  clearText: string
  verificationGroup: { title: string; options: VerificationOption[]; note: string }
  industryGroup: { title: string; options: IndustryOption[] }
  regionGroup: { title: string; chips: RegionChip[] }
  cagrGroup: { title: string; value: string; progressWidth: string }
  verifiedRecencyGroup: { title: string; options: RecencyOption[] }
}

export function IQSearchFilters({ data }: { data: FiltersData }) {
  const [industryChecked, setIndustryChecked] = React.useState<boolean[]>(
    data.industryGroup.options.map((o) => o.checked)
  )
  const [regionActive, setRegionActive] = React.useState<number>(
    data.regionGroup.chips.findIndex((c) => c.checked)
  )
  const [recencyActive, setRecencyActive] = React.useState<number>(
    data.verifiedRecencyGroup.options.findIndex((o) => o.checked)
  )

  return (
    <aside className="bg-white border border-[#E2DDD6] rounded-[8px] sticky top-[82px]">
      {/* Header */}
      <div className="flex justify-between items-center px-[18px] py-[15px] border-b border-[#F0EDE8]">
        <span className="text-[13px] font-semibold text-ink flex items-center gap-1.5">
          <SlidersHorizontal className="size-4 text-navy" />
          {data.title}
        </span>
        <button className="text-[11.5px] font-semibold text-navy cursor-pointer bg-transparent border-none hover:opacity-70 transition-opacity">
          {data.clearText}
        </button>
      </div>

      {/* Verification */}
      <div className="px-[18px] py-[15px] border-b border-[#F0EDE8]">
        <div className="text-[10.5px] font-bold tracking-[.06em] uppercase text-[#9A968E] mb-[11px]">
          {data.verificationGroup.title}
        </div>
        {data.verificationGroup.options.map((opt, i) => (
          <label
            key={i}
            className={`flex items-center gap-2.5 text-[13px] mb-2.5 last:mb-0 ${
              opt.disabled ? "cursor-not-allowed text-[#9A968E]" : "cursor-pointer text-ink"
            }`}
          >
            <span
              className={`w-4 h-4 rounded-[3px] border flex items-center justify-center shrink-0 transition-colors ${
                opt.checked && !opt.disabled
                  ? "border-[#1A7340] bg-[#1A7340]"
                  : opt.disabled
                  ? "border-[#E2DDD6] bg-[#F7F6F3]"
                  : "border-[#C8C3BA]"
              }`}
            >
              {opt.checked && !opt.disabled && <Check className="size-2.5 text-white" strokeWidth={3} />}
            </span>
            {opt.label}
            <span className={`ml-auto text-[11px] ${opt.disabled ? "text-[9.5px] font-bold bg-[#F0EDE8] px-1.5 py-px rounded-[3px]" : ""} text-[#9A968E]`}>
              {opt.count}
            </span>
          </label>
        ))}
        <div className="text-[10.5px] text-[#9A968E] leading-[1.5] mt-2.5 italic">
          {data.verificationGroup.note}
        </div>
      </div>

      {/* Industry */}
      <div className="px-[18px] py-[15px] border-b border-[#F0EDE8]">
        <div className="text-[10.5px] font-bold tracking-[.06em] uppercase text-[#9A968E] mb-[11px]">
          {data.industryGroup.title}
        </div>
        {data.industryGroup.options.map((opt, i) => (
          <label key={i} className="flex items-center gap-2.5 text-[13px] text-ink cursor-pointer mb-2.5 last:mb-0">
            <span
              onClick={() => {
                const next = [...industryChecked]
                next[i] = !next[i]
                setIndustryChecked(next)
              }}
              className={`w-4 h-4 rounded-[3px] border flex items-center justify-center shrink-0 transition-colors cursor-pointer ${
                industryChecked[i] ? "border-navy bg-navy" : "border-[#C8C3BA]"
              }`}
            >
              {industryChecked[i] && <Check className="size-2.5 text-white" strokeWidth={3} />}
            </span>
            {opt.label}
            <span className="ml-auto text-[11px] text-[#9A968E]">{opt.count}</span>
          </label>
        ))}
      </div>

      {/* Region */}
      <div className="px-[18px] py-[15px] border-b border-[#F0EDE8]">
        <div className="text-[10.5px] font-bold tracking-[.06em] uppercase text-[#9A968E] mb-[11px]">
          {data.regionGroup.title}
        </div>
        <div className="flex flex-wrap gap-1.5">
          {data.regionGroup.chips.map((chip, i) => (
            <button
              key={i}
              onClick={() => setRegionActive(i)}
              className={`text-[11.5px] font-medium px-[11px] py-[5px] rounded-full border cursor-pointer transition-all duration-150 ${
                regionActive === i
                  ? "border-navy bg-navy text-white"
                  : "border-[#C8C3BA] text-[#6B6760] bg-transparent hover:border-navy hover:text-navy"
              }`}
            >
              {chip.label}
            </button>
          ))}
        </div>
      </div>

      {/* CAGR Slider */}
      <div className="px-[18px] py-[15px] border-b border-[#F0EDE8]">
        <div className="flex justify-between mb-[11px]">
          <span className="text-[10.5px] font-bold tracking-[.06em] uppercase text-[#9A968E]">
            {data.cagrGroup.title}
          </span>
          <span className="text-[11.5px] font-bold text-[#1A7340] flex items-center gap-1">
            <TrendingUp className="size-3" />
            {data.cagrGroup.value}
          </span>
        </div>
        <div className="h-[5px] bg-[#F0EDE8] rounded-[3px] relative">
          <div
            style={{ width: data.cagrGroup.progressWidth }}
            className="absolute left-0 top-0 bottom-0 bg-[#1A7340] rounded-[3px]"
          />
          <div
            style={{ left: data.cagrGroup.progressWidth }}
            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-[15px] h-[15px] rounded-full bg-white border-2 border-[#1A7340] cursor-pointer shadow-sm"
          />
        </div>
        <div className="flex justify-between mt-1.5 text-[10.5px] text-[#9A968E]">
          <span>0%</span>
          <span>60%+</span>
        </div>
      </div>

      {/* Recency */}
      <div className="px-[18px] py-[15px]">
        <div className="text-[10.5px] font-bold tracking-[.06em] uppercase text-[#9A968E] mb-[11px]">
          {data.verifiedRecencyGroup.title}
        </div>
        {data.verifiedRecencyGroup.options.map((opt, i) => (
          <label key={i} className="flex items-center gap-2.5 text-[13px] text-ink cursor-pointer mb-2.5 last:mb-0">
            <span
              onClick={() => setRecencyActive(i)}
              className={`w-[15px] h-[15px] rounded-full border flex items-center justify-center shrink-0 transition-colors cursor-pointer ${
                recencyActive === i ? "border-navy" : "border-[#C8C3BA]"
              }`}
            >
              {recencyActive === i && (
                <span className="w-[7px] h-[7px] rounded-full bg-navy block" />
              )}
            </span>
            {opt.label}
          </label>
        ))}
      </div>
    </aside>
  )
}