"use client";

import { useState } from "react";
import { Edit3 } from "lucide-react";

interface BuilderField {
  label: string;
  value: string;
  editable?: boolean;
}

export default function AITreatmentBuilder() {
  const [treatment, setTreatment] = useState("Kidney Transplant");
  const [generating, setGenerating] = useState(false);
  const [generated, setGenerated] = useState(false);

  const fields: BuilderField[] = [
    { label: "Selected Treatment", value: treatment, editable: true },
    { label: "Matched Hospitals", value: "6" },
    { label: "Average Quote", value: "৳ 9,40,000" },
    { label: "Estimated Timeline", value: "21 Days" },
  ];

  const handleGenerate = async () => {
    setGenerating(true);
    await new Promise((r) => setTimeout(r, 1500));
    setGenerating(false);
    setGenerated(true);
  };

  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-slate-100">
        <h2 className="text-sm font-bold text-slate-900">AI Treatment Plan Builder</h2>
      </div>
      <div className="p-4 space-y-3">
        {fields.map((field) => (
          <div key={field.label} className="flex items-center justify-between">
            <span className="text-xs text-slate-500">{field.label}</span>
            <div className="flex items-center gap-1">
              {field.editable ? (
                <select
                  value={treatment}
                  onChange={(e) => { setTreatment(e.target.value); setGenerated(false); }}
                  className="text-xs font-semibold text-slate-800 border-none bg-transparent focus:outline-none text-right"
                >
                  {["Kidney Transplant", "Liver Transplant", "Cardiac Surgery", "Cancer Care", "IVF & Fertility"].map(
                    (t) => <option key={t}>{t}</option>
                  )}
                </select>
              ) : (
                <span className="text-xs font-semibold text-slate-800">{field.value}</span>
              )}
              <button className="w-5 h-5 bg-slate-100 rounded flex items-center justify-center hover:bg-slate-200 transition-colors">
                <Edit3 className="w-2.5 h-2.5 text-slate-500" />
              </button>
            </div>
          </div>
        ))}

        <button
          onClick={handleGenerate}
          disabled={generating}
          className={`w-full py-2.5 rounded-lg text-sm font-semibold transition-all ${
            generated
              ? "bg-green-600 hover:bg-green-700 text-white"
              : "bg-green-600 hover:bg-green-700 text-white"
          } disabled:opacity-70 disabled:cursor-not-allowed`}
        >
          {generating ? (
            <span className="flex items-center justify-center gap-2">
              <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Generating...
            </span>
          ) : generated ? (
            "✓ Plan Generated – Download PDF"
          ) : (
            "Generate Plan"
          )}
        </button>
      </div>
    </div>
  );
}