"use client"

import React from "react"
import { Plus, Trash2 } from "lucide-react"

// ─── Types ────────────────────────────────────────────────────────────────────

export interface HospitalsPageFilterOption {
  label: string
}

export interface HospitalsPageFilter {
  label: string
  options: HospitalsPageFilterOption[]
}

export interface HospitalsPageSortOption {
  label: string
}

export interface HospitalsPageFiltersSectionData {
  filters: HospitalsPageFilter[]
  sortOptions: HospitalsPageSortOption[]
}

// ─── Shared UI helpers ────────────────────────────────────────────────────────

function fieldClass(invalid = false) {
  return `w-full bg-card border rounded-xl px-3 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 ${
    invalid
      ? "border-red-400 focus:ring-red-200/70 focus:border-red-500"
      : "border-border focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
  }`
}

function Label({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
      {children}
    </label>
  )
}

function SubLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-semibold text-muted-foreground font-sans">
      {children}
    </label>
  )
}

function ItemBadge({ index, label }: { index: number; label: string }) {
  return (
    <span
      className="text-xs font-bold font-sans px-2 py-0.5 rounded-md"
      style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
    >
      {label} {index + 1}
    </span>
  )
}

function AddButton({ onClick, label }: { onClick: () => void; label: string }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold font-sans transition-all hover:brightness-105 active:scale-[0.98]"
      style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
    >
      <Plus className="w-3.5 h-3.5" aria-hidden="true" />
      {label}
    </button>
  )
}

function RemoveButton({ onClick, label }: { onClick: () => void; label: string }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
      aria-label={label}
    >
      <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
    </button>
  )
}

function SmallAddButton({ onClick, label }: { onClick: () => void; label: string }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="flex cursor-pointer items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold font-sans transition-all hover:brightness-105 active:scale-[0.98]"
      style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
    >
      <Plus className="w-3 h-3" aria-hidden="true" />
      {label}
    </button>
  )
}

function EmptyState({ label, onAdd }: { label: string; onAdd: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed border-border">
      <p className="text-xs text-muted-foreground font-sans">No {label} yet.</p>
      <button
        type="button"
        onClick={onAdd}
        className="text-xs cursor-pointer font-semibold font-sans"
        style={{ color: "var(--brand-green)" }}
      >
        Add your first {label}
      </button>
    </div>
  )
}

// ─── Main component ───────────────────────────────────────────────────────────

interface Props {
  value: HospitalsPageFiltersSectionData
  onChange: (value: HospitalsPageFiltersSectionData) => void
  validation?: {
    filters?: boolean
    filterItems?: Array<{ label?: boolean; options?: boolean; optionItems?: Array<{ label?: boolean }> }>
    sortOptions?: boolean
    sortOptionItems?: Array<{ label?: boolean }>
  }
}

export function HospitalsPageFiltersSection({ value, onChange, validation }: Props) {
  function set<K extends keyof HospitalsPageFiltersSectionData>(key: K, val: HospitalsPageFiltersSectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  // Filters
  function addFilter() {
    set("filters", [...value.filters, { label: "", options: [] }])
  }
  function removeFilter(i: number) {
    set("filters", value.filters.filter((_, idx) => idx !== i))
  }
  function updateFilterLabel(i: number, label: string) {
    set("filters", value.filters.map((f, idx) => (idx === i ? { ...f, label } : f)))
  }

  // Filter options
  function addFilterOption(filterIndex: number) {
    const updated = value.filters.map((f, idx) =>
      idx === filterIndex ? { ...f, options: [...f.options, { label: "" }] } : f
    )
    set("filters", updated)
  }
  function removeFilterOption(filterIndex: number, optionIndex: number) {
    const updated = value.filters.map((f, idx) =>
      idx === filterIndex
        ? { ...f, options: f.options.filter((_, oi) => oi !== optionIndex) }
        : f
    )
    set("filters", updated)
  }
  function updateFilterOption(filterIndex: number, optionIndex: number, label: string) {
    const updated = value.filters.map((f, idx) =>
      idx === filterIndex
        ? {
            ...f,
            options: f.options.map((o, oi) => (oi === optionIndex ? { label } : o)),
          }
        : f
    )
    set("filters", updated)
  }

  // Sort options
  function addSortOption() {
    set("sortOptions", [...value.sortOptions, { label: "" }])
  }
  function removeSortOption(i: number) {
    set("sortOptions", value.sortOptions.filter((_, idx) => idx !== i))
  }
  function updateSortOption(i: number, label: string) {
    set("sortOptions", value.sortOptions.map((s, idx) => (idx === i ? { label } : s)))
  }

  return (
    <div className="flex flex-col gap-6">

      {/* Filters */}
      <div className={`flex flex-col gap-3 rounded-xl ${validation?.filters && value.filters.length === 0 ? "border border-red-300 p-3 bg-red-50/40" : ""}`}>
        <div className="flex items-center justify-between">
          <Label>Filters</Label>
          <AddButton onClick={addFilter} label="Add Filter" />
        </div>

        {value.filters.length === 0 ? (
          <EmptyState label="filter" onAdd={addFilter} />
        ) : (
          <div className="flex flex-col gap-4">
            {value.filters.map((filter, i) => (
              <div key={i} className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/40">
                {/* Filter header */}
                <div className="flex items-center justify-between">
                  <ItemBadge index={i} label="Filter" />
                  <RemoveButton onClick={() => removeFilter(i)} label={`Remove filter ${i + 1}`} />
                </div>

                {/* Filter label */}
                <div className="flex flex-col gap-1.5">
                  <SubLabel>Label</SubLabel>
                  <input
                    type="text"
                    value={filter.label}
                    onChange={(e) => updateFilterLabel(i, e.target.value)}
                    placeholder="e.g. Specialty"
                    className={fieldClass(!!validation?.filterItems?.[i]?.label)}
                  />
                </div>

                {/* Filter options */}
                <div className={`flex flex-col gap-2 rounded-xl ${validation?.filterItems?.[i]?.options && filter.options.length === 0 ? "border border-red-300 p-2 bg-red-50/40" : ""}`}>
                  <div className="flex items-center justify-between">
                    <SubLabel>Options</SubLabel>
                    <SmallAddButton onClick={() => addFilterOption(i)} label="Add Option" />
                  </div>

                  {filter.options.length === 0 ? (
                    <p className="text-xs text-muted-foreground font-sans py-2 text-center italic">
                      No options yet. Click &quot;Add Option&quot; to add one.
                    </p>
                  ) : (
                    <div className="flex flex-col gap-2">
                      {filter.options.map((option, oi) => (
                        <div key={oi} className="flex items-center gap-2">
                          <input
                            type="text"
                            value={option.label}
                            onChange={(e) => updateFilterOption(i, oi, e.target.value)}
                            placeholder={`e.g. Option ${oi + 1}`}
                            className={fieldClass(!!validation?.filterItems?.[i]?.optionItems?.[oi]?.label)}
                          />
                          <button
                            type="button"
                            onClick={() => removeFilterOption(i, oi)}
                            className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors shrink-0"
                            aria-label={`Remove option ${oi + 1}`}
                          >
                            <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Sort Options */}
      <div className={`flex flex-col gap-3 rounded-xl ${validation?.sortOptions && value.sortOptions.length === 0 ? "border border-red-300 p-3 bg-red-50/40" : ""}`}>
        <div className="flex items-center justify-between">
          <Label>Sort Options</Label>
          <AddButton onClick={addSortOption} label="Add Sort Option" />
        </div>

        {value.sortOptions.length === 0 ? (
          <EmptyState label="sort option" onAdd={addSortOption} />
        ) : (
          <div className="flex flex-col gap-2">
            {value.sortOptions.map((sortOption, i) => (
              <div key={i} className="flex items-center gap-2">
                <div
                  className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold font-sans"
                  style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                  aria-hidden="true"
                >
                  {i + 1}
                </div>
                <input
                  type="text"
                  value={sortOption.label}
                  onChange={(e) => updateSortOption(i, e.target.value)}
                  placeholder={`e.g. Sort option ${i + 1}`}
                  className={fieldClass(!!validation?.sortOptionItems?.[i]?.label)}
                />
                <button
                  type="button"
                  onClick={() => removeSortOption(i)}
                  className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors shrink-0"
                  aria-label={`Remove sort option ${i + 1}`}
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

    </div>
  )
}