"use client"

import React from "react"
import { IconPicker } from "@/components/dashboard/shared/IconPicker"

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

export interface HospitalsPageCTASectionData {
  eyebrow: string
  title: string
  subtitle: string
  primaryButtonIcon: string
  primaryButtonText: string
  primaryButtonLink: string
  secondaryButtonIcon: string
  secondaryButtonText: string
  secondaryButtonLink: string
}

// ─── 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 GroupCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/40">
      <p
        className="text-[11px] font-bold uppercase tracking-wider font-sans"
        style={{ color: "var(--brand-navy)" }}
      >
        {title}
      </p>
      {children}
    </div>
  )
}

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

interface Props {
  value: HospitalsPageCTASectionData
  onChange: (value: HospitalsPageCTASectionData) => void
  validation?: {
    eyebrow?: boolean
    title?: boolean
    subtitle?: boolean
    primaryButtonIcon?: boolean
    primaryButtonText?: boolean
    primaryButtonLink?: boolean
    secondaryButtonIcon?: boolean
    secondaryButtonText?: boolean
    secondaryButtonLink?: boolean
  }
}

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

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

      {/* Eyebrow */}
      <div className="flex flex-col gap-1.5">
        <Label>Eyebrow</Label>
        <input
          type="text"
          value={value.eyebrow}
          onChange={(e) => set("eyebrow", e.target.value)}
          placeholder="e.g. Ready to Find the Right Hospital?"
          className={fieldClass(!!validation?.eyebrow)}
        />
      </div>

      {/* Title */}
      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input
          type="text"
          value={value.title}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. Start Your Medical Journey Today"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      {/* Subtitle */}
      <div className="flex flex-col gap-1.5">
        <Label>Subtitle</Label>
        <textarea
          value={value.subtitle}
          onChange={(e) => set("subtitle", e.target.value)}
          placeholder="Write a compelling call-to-action subtitle..."
          rows={4}
          className={`${fieldClass(!!validation?.subtitle)} resize-none leading-relaxed`}
        />
      </div>

      {/* Primary Button */}
      <GroupCard title="Primary Button">
        <div className="flex flex-col gap-1.5">
          <SubLabel>Icon</SubLabel>
          <div
            className={`rounded-xl ${
              validation?.primaryButtonIcon ? "border border-red-400 p-2 bg-red-50/40" : ""
            }`}
          >
            <IconPicker
              value={value.primaryButtonIcon}
              onChange={(key) => set("primaryButtonIcon", key)}
            />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Text</SubLabel>
          <input
            type="text"
            value={value.primaryButtonText}
            onChange={(e) => set("primaryButtonText", e.target.value)}
            placeholder="e.g. Browse Hospitals"
            className={fieldClass(!!validation?.primaryButtonText)}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Link</SubLabel>
          <input
            type="text"
            value={value.primaryButtonLink}
            onChange={(e) => set("primaryButtonLink", e.target.value)}
            placeholder="e.g. /hospitals or https://..."
            className={fieldClass(!!validation?.primaryButtonLink)}
          />
        </div>
      </GroupCard>

      {/* Secondary Button */}
      <GroupCard title="Secondary Button">
        <div className="flex flex-col gap-1.5">
          <SubLabel>Icon</SubLabel>
          <div
            className={`rounded-xl ${
              validation?.secondaryButtonIcon ? "border border-red-400 p-2 bg-red-50/40" : ""
            }`}
          >
            <IconPicker
              value={value.secondaryButtonIcon}
              onChange={(key) => set("secondaryButtonIcon", key)}
            />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Text</SubLabel>
          <input
            type="text"
            value={value.secondaryButtonText}
            onChange={(e) => set("secondaryButtonText", e.target.value)}
            placeholder="e.g. Contact Us"
            className={fieldClass(!!validation?.secondaryButtonText)}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Link</SubLabel>
          <input
            type="text"
            value={value.secondaryButtonLink}
            onChange={(e) => set("secondaryButtonLink", e.target.value)}
            placeholder="e.g. /contact or https://..."
            className={fieldClass(!!validation?.secondaryButtonLink)}
          />
        </div>
      </GroupCard>

    </div>
  )
}