"use client"

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

export interface ScheduleEntry {
  day: string
  hours: string
}

export interface WorkingHoursSectionData {
  title: string
  schedule: ScheduleEntry[]
  extraNote: string
}

interface Props {
  value: WorkingHoursSectionData
  onChange: (value: WorkingHoursSectionData) => void
  disabled?: boolean
  validation?: {
    title?: boolean
    extraNote?: boolean
    schedule?: boolean
    scheduleItems?: Array<{ day?: boolean; hours?: boolean }>
  }
}

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>
  )
}

export function WorkingHoursSection({ value, onChange, disabled = false, validation }: Props) {
  function set<K extends keyof WorkingHoursSectionData>(key: K, val: WorkingHoursSectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  function addEntry() {
    if (disabled) return
    set("schedule", [...value.schedule, { day: "", hours: "" }])
  }

  function removeEntry(index: number) {
    set("schedule", value.schedule.filter((_, i) => i !== index))
  }

  function updateEntry(index: number, field: keyof ScheduleEntry, val: string) {
    set(
      "schedule",
      value.schedule.map((entry, i) => (i === index ? { ...entry, [field]: val } : entry))
    )
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Title */}
      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input
          type="text"
          value={value.title}
          disabled={disabled}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. Working Hours"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      {/* Schedule */}
      <div
        className={`flex flex-col gap-3 rounded-xl ${
          validation?.schedule && value.schedule.length === 0 ? "border border-red-300 p-3 bg-red-50/40" : ""
        }`}
      >
        <div className="flex items-center justify-between">
          <Label>Schedule</Label>
          <button
            type="button"
            onClick={addEntry}
            disabled={disabled}
            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 Entry
          </button>
        </div>

        {value.schedule.length === 0 ? (
          <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 schedule entries yet.</p>
            <button
              type="button"
              onClick={addEntry}
              disabled={disabled}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first entry
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            {value.schedule.map((entry, index) => (
              <div
                key={index}
                className="flex items-center gap-3 p-4 rounded-xl border border-border bg-muted/40"
              >
                <span
                  className="text-xs font-bold font-sans px-2 py-0.5 rounded-md shrink-0"
                  style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                >
                  {index + 1}
                </span>
                <div className="flex-1 grid grid-cols-2 gap-3">
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-semibold text-muted-foreground font-sans">Day</label>
                    <input
                      type="text"
                      value={entry.day}
                      disabled={disabled}
                      onChange={(e) => updateEntry(index, "day", e.target.value)}
                      placeholder="e.g. Monday – Friday"
                      className={fieldClass(!!validation?.scheduleItems?.[index]?.day)}
                    />
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-semibold text-muted-foreground font-sans">Hours</label>
                    <input
                      type="text"
                      value={entry.hours}
                      disabled={disabled}
                      onChange={(e) => updateEntry(index, "hours", e.target.value)}
                      placeholder="e.g. 09:00 – 18:00"
                      className={fieldClass(!!validation?.scheduleItems?.[index]?.hours)}
                    />
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => removeEntry(index)}
                  disabled={disabled}
                  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 entry ${index + 1}`}
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Extra Note */}
      <div className="flex flex-col gap-1.5">
        <Label>Extra Note</Label>
        <textarea
          value={value.extraNote}
          disabled={disabled}
          onChange={(e) => set("extraNote", e.target.value)}
          placeholder="e.g. Our patient support team is available 24/7 for urgent inquiries."
          rows={3}
          className={`${fieldClass(!!validation?.extraNote)} resize-none leading-relaxed`}
        />
      </div>
    </div>
  )
}