"use client"

import { Plus, Trash2, Link as LinkIcon, MapPin } from "lucide-react"
import { IconPicker } from "@/components/dashboard/shared/IconPicker"

export interface ContactInfoItem {
  icon: string
  text: string
}

export interface ExtraCardItem {
  icon: string
  label: string
  value: string
}

export interface HospitalLocationData {
  eyebrow: string
  title: string
  /** Share link or embed URL from Google Maps — used for the frontend map */
  googleMapsUrl: string
  contactInfoCardTitle: string
  contactInfo: ContactInfoItem[]
  contactButtonIcon: string
  contactButtonText: string
  contactButtonLink: string
  extraCardTitle: string
  extraCard: ExtraCardItem[]
}

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

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

const listFieldClass =
  "w-full bg-muted bg-white border 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 HospitalLocationSection({ value, onChange }: Props) {
  function set<K extends keyof HospitalLocationData>(key: K, val: HospitalLocationData[K]) {
    onChange({ ...value, [key]: val })
  }

  function updateContactInfo(idx: number, field: keyof ContactInfoItem, val: string) {
    const updated = value.contactInfo.map((c, i) => (i === idx ? { ...c, [field]: val } : c))
    set("contactInfo", updated)
  }

  function addContactInfo() {
    set("contactInfo", [...value.contactInfo, { icon: "", text: "" }])
  }

  function removeContactInfo(idx: number) {
    set("contactInfo", value.contactInfo.filter((_, i) => i !== idx))
  }

  function updateExtraCard(idx: number, field: keyof ExtraCardItem, val: string) {
    const updated = value.extraCard.map((e, i) => (i === idx ? { ...e, [field]: val } : e))
    set("extraCard", updated)
  }

  function addExtraCard() {
    set("extraCard", [...value.extraCard, { icon: "", label: "", value: "" }])
  }

  function removeExtraCard(idx: number) {
    set("extraCard", value.extraCard.filter((_, i) => i !== idx))
  }

  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-2 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. Find Us" 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. Location & Contact" className={inputClass} />
          </div>
        </div>

        <div className="flex flex-col gap-1.5 pt-1 border-t border-border">
          <label className="text-xs font-semibold text-foreground font-sans flex items-center gap-2">
            <MapPin className="w-3.5 h-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
            Google Maps link
          </label>
          <input
            type="url"
            value={value.googleMapsUrl}
            onChange={(e) => set("googleMapsUrl", e.target.value)}
            placeholder="https://maps.app.goo.gl/... or https://www.google.com/maps/embed?..."
            className={inputClass}
          />
          <p className="text-[11px] text-muted-foreground font-sans leading-relaxed">
            Paste the location link from Google Maps (Share → Copy link) or an embed URL. This value is passed to the hospital page map on the front end.
          </p>
        </div>
      </div>

      {/* Contact Info Card */}
      <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/20">
        <div className="flex flex-col gap-1.5 max-w-md">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Contact Information Card Title</label>
          <input
            type="text"
            value={value.contactInfoCardTitle}
            onChange={(e) => set("contactInfoCardTitle", e.target.value)}
            placeholder="e.g. Contact Information"
            className={inputClass}
          />
        </div>

        <div className="flex items-center justify-between gap-3 flex-wrap">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider shrink-0">Contact rows ({value.contactInfo.length})</label>
          <button
            type="button"
            onClick={addContactInfo}
            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" />
            Add row
          </button>
        </div>

        {value.contactInfo.length === 0 ? (
          <div
            className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
            style={{ borderColor: "var(--border)" }}
          >
            <p className="text-xs text-muted-foreground font-sans">No contact rows yet.</p>
            <button
              type="button"
              onClick={addContactInfo}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first row
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.contactInfo.map((item, idx) => (
              <div key={idx} className="flex flex-col sm:flex-row gap-3 p-4 rounded-xl border border-border bg-card">
                <div className="flex items-center justify-between sm:justify-start gap-2">
                  <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)" }}
                  >
                    Row {idx + 1}
                  </span>
                  <button
                    type="button"
                    onClick={() => removeContactInfo(idx)}
                    className="sm:hidden p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer"
                    aria-label="Remove"
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-3 items-start">
                  <div className="flex flex-col gap-1">
                    <span className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Icon</span>
                    <IconPicker value={item.icon} onChange={(k) => updateContactInfo(idx, "icon", k)} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Text</span>
                    <input
                      type="text"
                      value={item.text}
                      onChange={(e) => updateContactInfo(idx, "text", e.target.value)}
                      placeholder="Contact text"
                      className={listFieldClass}
                    />
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => removeContactInfo(idx)}
                  className="hidden sm:block p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer self-start shrink-0"
                  aria-label="Remove"
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="pt-3 border-t border-border">
          <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider mb-3 flex items-center gap-1">
            <LinkIcon className="w-3 h-3" aria-hidden="true" />
            Card Button
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <IconPicker value={value.contactButtonIcon} onChange={(k) => set("contactButtonIcon", k)} />
            <input type="text" value={value.contactButtonText} onChange={(e) => set("contactButtonText", e.target.value)} placeholder="Button text" className={inputClass} />
            <input type="text" value={value.contactButtonLink} onChange={(e) => set("contactButtonLink", e.target.value)} placeholder="Button link" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Extra Card */}
      <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/20">
        <div className="flex flex-col gap-1.5 max-w-md">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Extra Card Title</label>
          <input type="text" value={value.extraCardTitle} onChange={(e) => set("extraCardTitle", e.target.value)} placeholder="e.g. Logistics & Transfer" className={inputClass} />
        </div>
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Extra rows ({value.extraCard.length})</label>
          <button
            type="button"
            onClick={addExtraCard}
            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" />
            Add row
          </button>
        </div>
        {value.extraCard.length === 0 ? (
          <div
            className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
            style={{ borderColor: "var(--border)" }}
          >
            <p className="text-xs text-muted-foreground font-sans">No extra card rows yet.</p>
            <button
              type="button"
              onClick={addExtraCard}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first row
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.extraCard.map((item, idx) => (
              <div key={idx} className="flex flex-col gap-2 p-4 rounded-xl border border-border bg-card">
                <div className="flex items-center justify-between gap-2">
                  <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)" }}
                  >
                    Row {idx + 1}
                  </span>
                  <button
                    type="button"
                    onClick={() => removeExtraCard(idx)}
                    className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
                    aria-label="Remove"
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <div className="flex flex-col gap-1">
                    <span className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Icon</span>
                    <IconPicker value={item.icon} onChange={(k) => updateExtraCard(idx, "icon", k)} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Label</span>
                    <input type="text" value={item.label} onChange={(e) => updateExtraCard(idx, "label", e.target.value)} placeholder="Label" className={listFieldClass} />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Value</span>
                    <input type="text" value={item.value} onChange={(e) => updateExtraCard(idx, "value", e.target.value)} placeholder="Value" className={listFieldClass} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}