"use client";

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

export interface MedicationItem {
  drugName: string;
  dosage: string;
  timing: string;
  notes: string;
}

interface Step3Props {
  medications: MedicationItem[];
  onChange: (medications: MedicationItem[]) => void;
}

// Timing will be stored as a real clock time (HH:mm), e.g. "14:30".
// Kept the field name `timing` to avoid DB/schema changes.



export default function Step3Medications({ medications, onChange }: Step3Props) {
  function addMedication() {
    onChange([...medications, { drugName: "", dosage: "", timing: "", notes: "" }]);
  }

  function removeMedication(index: number) {
    const next = medications.filter((_, i) => i !== index);
    onChange(next);
  }

  function updateMedication(index: number, field: keyof MedicationItem, value: string) {
    const next = medications.map((med, i) =>
      i === index ? { ...med, [field]: value } : med
    );
    onChange(next);
  }

  return (
    <div className="space-y-5">
      {medications.map((med, index) => (
        <div
          key={index}
          className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-5"
        >
          <div className="mb-3 flex items-center justify-between">
            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
              Medication #{index + 1}
            </span>
            <button
              type="button"
              onClick={() => removeMedication(index)}
              className="inline-flex items-center gap-1 rounded-md bg-zinc-800 px-2.5 py-1.5 text-xs font-medium text-red-400 transition-colors hover:bg-red-900/20"
            >
              <Trash2 className="h-3.5 w-3.5" />
              Remove
            </button>
          </div>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
              <label className="mb-1 block text-xs font-medium text-zinc-400">
                Drug Name <span className="text-red-400">*</span>
              </label>
              <input
                type="text"
                value={med.drugName}
                onChange={(e) => updateMedication(index, "drugName", e.target.value)}
                placeholder="e.g. Donepezil"
                className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium text-zinc-400">
                Dosage <span className="text-red-400">*</span>
              </label>
              <input
                type="text"
                value={med.dosage}
                onChange={(e) => updateMedication(index, "dosage", e.target.value)}
                placeholder="e.g. 10mg"
                className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium text-zinc-400" htmlFor={`med-timing-${index}`}>
                Time of medication <span className="text-red-400">*</span>
              </label>
              <input
                id={`med-timing-${index}`}
                type="time"
                value={med.timing}
                onChange={(e) => updateMedication(index, "timing", e.target.value)}
                className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
              />
              <p className="mt-1 text-[11px] text-zinc-500">Stored as HH:mm (real time).</p>
            </div>


            <div>
              <label className="mb-1 block text-xs font-medium text-zinc-400">
                Note
              </label>
              <input
                type="text"
                value={med.notes}
                onChange={(e) => updateMedication(index, "notes", e.target.value)}
                placeholder="Optional note"
                className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
              />
            </div>
          </div>
        </div>
      ))}

      <button
        type="button"
        onClick={addMedication}
        className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-zinc-700 bg-zinc-900/30 py-3 text-sm font-medium text-zinc-300 transition-colors hover:border-indigo-500/60 hover:bg-zinc-900 hover:text-indigo-300"
      >
        <Plus className="h-4 w-4" />
        Add Medication
      </button>
    </div>
  );
}