"use client"

import { Plus, X } from "lucide-react"

export interface CountryComparisonItem {
  countryName: string
  countryFlag: string
  price: string
  savingsText: string
}

export interface ProcedureCountriesComparisonData {
  eyebrow: string
  title: string
  subtitle: string
  bestValueCountryName: string
  bestValueCountryFlag: string
  bestValuePrice: string
  countries: CountryComparisonItem[]
  mainCardLabel: string
  mainCardValue: string
  mainCardDescription: string
  mainCardButtonText: string
  mainCardButtonLink: string
  disclaimerText: string
}

interface Props {
  value: ProcedureCountriesComparisonData
  onChange: (value: ProcedureCountriesComparisonData) => void
}

const inputClass =
  "w-full bg-card border  border-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 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

const inputMuted =
  "w-full bg-muted border bg-white border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

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

  function addCountry() {
    set("countries", [...value.countries, { countryName: "", countryFlag: "", price: "", savingsText: "" }])
  }
  function removeCountry(i: number) {
    set("countries", value.countries.filter((_, idx) => idx !== i))
  }
  function updateCountry(i: number, field: keyof CountryComparisonItem, val: string) {
    set("countries", value.countries.map((c, idx) => idx === i ? { ...c, [field]: val } : c))
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Section Headings */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-green)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Section Headings</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label>
            <input type="text" value={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Compare Prices" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Title</label>
            <input type="text" value={value.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Country Comparison" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Subtitle</label>
            <input type="text" value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="e.g. Find the best price" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Best Value Card */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-navy)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Best Value Card</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Country Name</label>
            <input type="text" value={value.bestValueCountryName} onChange={(e) => set("bestValueCountryName", e.target.value)} placeholder="e.g. Turkey" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Country Flag (emoji)</label>
            <input type="text" value={value.bestValueCountryFlag} onChange={(e) => set("bestValueCountryFlag", e.target.value)} placeholder="e.g. 🇹🇷" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Price</label>
            <input type="text" value={value.bestValuePrice} onChange={(e) => set("bestValuePrice", e.target.value)} placeholder="e.g. $1,500" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Countries Array */}
      <div className="flex flex-col gap-3">
        <div className="flex items-center justify-between">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Countries Comparison</label>
          <button
            type="button"
            onClick={addCountry}
            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"
            style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
          >
            <Plus className="w-3.5 h-3.5" aria-hidden="true" />
            Add Country
          </button>
        </div>
        {value.countries.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-2 py-6 rounded-xl border border-dashed" style={{ borderColor: "var(--border)" }}>
            <p className="text-xs text-muted-foreground font-sans">No countries added yet.</p>
            <button type="button" onClick={addCountry} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>Add first country</button>
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            {value.countries.map((country, i) => (
              <div key={i} className="rounded-2xl border border-border bg-card overflow-hidden">
                <div className="flex items-center justify-between px-4 py-2.5 border-b border-border" style={{ background: "rgba(43,182,115,0.02)" }}>
                  <span className="text-xs font-bold font-sans px-2 py-0.5 rounded-md" style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}>
                    Country {i + 1}
                  </span>
                  <button type="button" onClick={() => removeCountry(i)} className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors" aria-label={`Remove country ${i + 1}`}>
                    <X className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="p-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Country Name</label>
                    <input type="text" value={country.countryName} onChange={(e) => updateCountry(i, "countryName", e.target.value)} placeholder="e.g. Turkey" className={inputMuted} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Country Flag (emoji)</label>
                    <input type="text" value={country.countryFlag} onChange={(e) => updateCountry(i, "countryFlag", e.target.value)} placeholder="e.g. 🇹🇷" className={inputMuted} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Price</label>
                    <input type="text" value={country.price} onChange={(e) => updateCountry(i, "price", e.target.value)} placeholder="e.g. $1,500" className={inputMuted} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Savings Text</label>
                    <input type="text" value={country.savingsText} onChange={(e) => updateCountry(i, "savingsText", e.target.value)} placeholder="e.g. Save 70%" className={inputMuted} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Main Card */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-navy)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Main Card</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Label</label>
            <input type="text" value={value.mainCardLabel} onChange={(e) => set("mainCardLabel", e.target.value)} placeholder="e.g. Best Value" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Value</label>
            <input type="text" value={value.mainCardValue} onChange={(e) => set("mainCardValue", e.target.value)} placeholder="e.g. $1,500" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5 sm:col-span-2">
            <label className="text-xs font-semibold text-foreground font-sans">Description</label>
            <textarea value={value.mainCardDescription} onChange={(e) => set("mainCardDescription", e.target.value)} placeholder="Card description..." rows={2} className={inputClass + " resize-none leading-relaxed"} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Button Text</label>
            <input type="text" value={value.mainCardButtonText} onChange={(e) => set("mainCardButtonText", e.target.value)} placeholder="e.g. Get a Free Quote" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Button Link</label>
            <input type="text" value={value.mainCardButtonLink} onChange={(e) => set("mainCardButtonLink", e.target.value)} placeholder="e.g. /contact" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Disclaimer */}
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Disclaimer Text</label>
        <textarea value={value.disclaimerText} onChange={(e) => set("disclaimerText", e.target.value)} placeholder="e.g. Prices are estimates and may vary..." rows={2} className={inputClass + " resize-none leading-relaxed"} />
      </div>
    </div>
  )
}