"use client";

import React, { useEffect, useState } from "react";
import ErpNavbar from "@/components/ErpNavbar";
import {
  Sliders,
  Plus,
  Save,
  CheckCircle2,
  Tags,
  DollarSign,
  ShieldCheck,
  UserPlus,
  KeyRound,
} from "lucide-react";

interface DropdownCategoryItem {
  id: string;
  key: string;
  label: string;
  groupName: string;
  description?: string;
  optionsJson: string;
}

interface CatalogItem {
  id: string;
  sku: string;
  category: string;
  name: string;
  unit: string;
  minPriceKes: number;
  maxPriceKes: number;
  originalPdfPrice?: string;
  notes: string;
}

interface StaffUserItem {
  id: string;
  name: string;
  email: string;
  phone?: string;
  role: "ADMIN" | "TECHNICIAN";
  title?: string;
  active: boolean;
  lastLoginAt?: string | null;
}

export default function AdminSettingsPage() {
  const [tab, setTab] = useState<"ROLES" | "DROPDOWNS" | "CATALOG">("ROLES");
  const [dropdowns, setDropdowns] = useState<DropdownCategoryItem[]>([]);
  const [catalog, setCatalog] = useState<CatalogItem[]>([]);
  const [users, setUsers] = useState<StaffUserItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [savedId, setSavedId] = useState<string | null>(null);

  // New Dropdown Category form
  const [newLabel, setNewLabel] = useState("");
  const [newGroup, setNewGroup] = useState("Hive & Colony Metrics");
  const [newOptionsText, setNewOptionsText] = useState("");

  // New Staff User form
  const [newStaff, setNewStaff] = useState({
    name: "",
    email: "",
    phone: "",
    role: "TECHNICIAN",
    title: "Field & GIS Apiarist",
    password: "",
  });
  const [staffMsg, setStaffMsg] = useState<string | null>(null);
  const [passwordResetMap, setPasswordResetMap] = useState<Record<string, string>>({});

  const loadSettings = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/erp/bootstrap");
      const data = await res.json();
      setDropdowns(data.dropdowns || []);
      setCatalog(data.catalog || []);
      setUsers(data.users || []);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadSettings();
  }, []);

  const handleSaveDropdown = async (dd: DropdownCategoryItem, rawText: string) => {
    const options = rawText
      .split("\n")
      .map((s) => s.trim())
      .filter(Boolean);

    const res = await fetch("/api/dropdowns", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id: dd.id,
        label: dd.label,
        groupName: dd.groupName,
        description: dd.description,
        options,
      }),
    });

    if (res.ok) {
      setSavedId(dd.id);
      setTimeout(() => setSavedId(null), 2000);
      await loadSettings();
    }
  };

  const handleCreateDropdownCategory = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newLabel || !newOptionsText) return;
    const options = newOptionsText
      .split("\n")
      .map((s) => s.trim())
      .filter(Boolean);

    const res = await fetch("/api/dropdowns", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        label: newLabel,
        groupName: newGroup,
        options,
      }),
    });

    if (res.ok) {
      setNewLabel("");
      setNewOptionsText("");
      await loadSettings();
    }
  };

  const handleSaveCatalogItem = async (item: CatalogItem) => {
    const res = await fetch("/api/catalog", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(item),
    });
    if (res.ok) {
      setSavedId(item.id);
      setTimeout(() => setSavedId(null), 2000);
    }
  };

  const handleCreateStaffUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setStaffMsg(null);
    const res = await fetch("/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newStaff),
    });
    const data = await res.json();
    if (res.ok) {
      setNewStaff({
        name: "",
        email: "",
        phone: "",
        role: "TECHNICIAN",
        title: "Field & GIS Apiarist",
        password: "",
      });
      setStaffMsg(`Created ${data.user.role} account for ${data.user.name}`);
      await loadSettings();
    } else {
      setStaffMsg(data.error || "Failed to create staff user");
    }
  };

  const handleUpdateStaffUser = async (
    user: StaffUserItem,
    newPassword?: string
  ) => {
    const res = await fetch("/api/users", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id: user.id,
        role: user.role,
        title: user.title,
        active: user.active,
        newPassword: newPassword || undefined,
      }),
    });
    if (res.ok) {
      setSavedId(user.id);
      if (newPassword) {
        setPasswordResetMap((prev) => ({ ...prev, [user.id]: "" }));
      }
      setTimeout(() => setSavedId(null), 2000);
      await loadSettings();
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-slate-50">
      <ErpNavbar />

      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 py-8 space-y-6">
        <div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-4">
          <div>
            <div className="text-xs font-extrabold uppercase text-amber-600 flex items-center gap-1.5">
              <Sliders className="w-3.5 h-3.5" />
              Admin Security, Roles & Master Data Configuration
            </div>
            <h1 className="text-2xl font-black text-slate-900 mt-1">
              Staff Roles, Field Dropdowns & Price Catalogue
            </h1>
            <p className="text-xs sm:text-sm text-slate-600 mt-0.5">
              Manage staff login accounts & permissions (`ADMIN` vs `TECHNICIAN`), customize field
              dropdown options, and edit SKU prices.
            </p>
          </div>

          <div className="inline-flex flex-wrap bg-slate-100 p-1 rounded-xl border border-slate-200 self-start gap-1">
            <button
              type="button"
              onClick={() => setTab("ROLES")}
              className={`px-4 py-2 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition ${
                tab === "ROLES"
                  ? "bg-hive-900 text-honey-400 shadow-sm"
                  : "text-slate-600 hover:text-slate-900"
              }`}
            >
              <ShieldCheck className="w-3.5 h-3.5" />
              Staff Users & Roles ({users.length})
            </button>
            <button
              type="button"
              onClick={() => setTab("DROPDOWNS")}
              className={`px-4 py-2 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition ${
                tab === "DROPDOWNS"
                  ? "bg-hive-900 text-honey-400 shadow-sm"
                  : "text-slate-600 hover:text-slate-900"
              }`}
            >
              <Tags className="w-3.5 h-3.5" />
              Field Dropdowns ({dropdowns.length})
            </button>
            <button
              type="button"
              onClick={() => setTab("CATALOG")}
              className={`px-4 py-2 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition ${
                tab === "CATALOG"
                  ? "bg-hive-900 text-honey-400 shadow-sm"
                  : "text-slate-600 hover:text-slate-900"
              }`}
            >
              <DollarSign className="w-3.5 h-3.5" />
              SKU Price Catalogue ({catalog.length})
            </button>
          </div>
        </div>

        {loading ? (
          <div className="p-12 text-center text-sm text-slate-500">
            Loading security & ERP configuration...
          </div>
        ) : tab === "ROLES" ? (
          <div className="grid lg:grid-cols-12 gap-6 items-start">
            {/* Left: Staff Accounts & Role Matrix */}
            <div className="lg:col-span-8 space-y-4">
              {users.map((u, idx) => (
                <div
                  key={u.id}
                  className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm space-y-4"
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="text-base font-black text-slate-900">
                          {u.name}
                        </h3>
                        <span
                          className={`text-[10px] font-black px-2 py-0.5 rounded ${
                            u.role === "ADMIN"
                              ? "bg-hive-900 text-honey-400"
                              : "bg-emerald-700 text-white"
                          }`}
                        >
                          {u.role}
                        </span>
                        <span
                          className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                            u.active
                              ? "bg-emerald-100 text-emerald-800"
                              : "bg-rose-100 text-rose-800"
                          }`}
                        >
                          {u.active ? "Active Login" : "Deactivated"}
                        </span>
                      </div>
                      <div className="text-xs text-slate-600 mt-0.5">
                        Email: <strong>{u.email}</strong>{" "}
                        {u.phone ? `• Phone: ${u.phone}` : ""}
                      </div>
                      <div className="text-[11px] text-slate-400 mt-0.5">
                        Last Login:{" "}
                        {u.lastLoginAt
                          ? new Date(u.lastLoginAt).toLocaleString("en-KE")
                          : "Ready for login"}
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      <select
                        value={u.role}
                        onChange={(e) =>
                          setUsers((prev) =>
                            prev.map((item, i) =>
                              i === idx
                                ? {
                                    ...item,
                                    role: e.target.value as "ADMIN" | "TECHNICIAN",
                                  }
                                : item
                            )
                          )
                        }
                        className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-extrabold bg-slate-50"
                      >
                        <option value="ADMIN">Role: ADMIN (Full ERP & Emailer)</option>
                        <option value="TECHNICIAN">
                          Role: TECHNICIAN (Field Collector)
                        </option>
                      </select>

                      <label className="flex items-center gap-1.5 text-xs font-bold text-slate-700 bg-slate-100 px-3 py-1.5 rounded-lg cursor-pointer">
                        <input
                          type="checkbox"
                          checked={u.active}
                          onChange={(e) =>
                            setUsers((prev) =>
                              prev.map((item, i) =>
                                i === idx
                                  ? { ...item, active: e.target.checked }
                                  : item
                              )
                            )
                          }
                          className="accent-emerald-600"
                        />
                        Active
                      </label>
                    </div>
                  </div>

                  <div className="grid sm:grid-cols-3 gap-3 pt-2 border-t border-slate-100 items-end text-xs">
                    <div>
                      <label className="block text-[11px] font-bold text-slate-500 mb-1">
                        Job Title
                      </label>
                      <input
                        type="text"
                        value={u.title || ""}
                        onChange={(e) =>
                          setUsers((prev) =>
                            prev.map((item, i) =>
                              i === idx ? { ...item, title: e.target.value } : item
                            )
                          )
                        }
                        className="w-full rounded-lg border border-slate-300 px-2.5 py-1.5 font-semibold"
                      />
                    </div>

                    <div>
                      <label className="block text-[11px] font-bold text-slate-500 mb-1 flex items-center gap-1">
                        <KeyRound className="w-3 h-3 text-amber-600" />
                        Reset Password (Optional)
                      </label>
                      <input
                        type="password"
                        value={passwordResetMap[u.id] || ""}
                        onChange={(e) =>
                          setPasswordResetMap((prev) => ({
                            ...prev,
                            [u.id]: e.target.value,
                          }))
                        }
                        placeholder="New password (min 6 chars)"
                        className="w-full rounded-lg border border-slate-300 px-2.5 py-1.5"
                      />
                    </div>

                    <div className="flex justify-end">
                      <button
                        type="button"
                        onClick={() =>
                          handleUpdateStaffUser(u, passwordResetMap[u.id])
                        }
                        className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-hive-900 text-honey-400 font-extrabold text-xs hover:bg-hive-800 transition"
                      >
                        {savedId === u.id ? (
                          <>
                            <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                            Updated!
                          </>
                        ) : (
                          <>
                            <Save className="w-3.5 h-3.5" />
                            Save Role / Password
                          </>
                        )}
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Right: Create New Staff Account */}
            <div className="lg:col-span-4 bg-white rounded-2xl p-6 border border-slate-200 shadow-sm sticky top-20 space-y-4">
              <h3 className="text-base font-black text-slate-900 flex items-center gap-2">
                <UserPlus className="w-4 h-4 text-amber-500" />
                Add Staff / Field Apiarist Account
              </h3>
              <p className="text-xs text-slate-500">
                Provision a new login account for a Field Technician or Operations Manager.
              </p>

              {staffMsg && (
                <div className="p-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-950 text-xs font-bold">
                  {staffMsg}
                </div>
              )}

              <form onSubmit={handleCreateStaffUser} className="space-y-3 text-xs">
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Full Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={newStaff.name}
                    onChange={(e) =>
                      setNewStaff({ ...newStaff, name: e.target.value })
                    }
                    placeholder="e.g. Grace Mwende"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  />
                </div>
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Email Address (Login ID) *
                  </label>
                  <input
                    type="email"
                    required
                    value={newStaff.email}
                    onChange={(e) =>
                      setNewStaff({ ...newStaff, email: e.target.value })
                    }
                    placeholder="grace@davallyapiculture.co.ke"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  />
                </div>
                <div className="grid grid-cols-2 gap-2.5">
                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Security Role *
                    </label>
                    <select
                      value={newStaff.role}
                      onChange={(e) =>
                        setNewStaff({ ...newStaff, role: e.target.value })
                      }
                      className="w-full rounded-lg border border-slate-300 px-2.5 py-2 font-bold"
                    >
                      <option value="TECHNICIAN">TECHNICIAN</option>
                      <option value="ADMIN">ADMIN</option>
                    </select>
                  </div>
                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Phone Number
                    </label>
                    <input
                      type="text"
                      value={newStaff.phone}
                      onChange={(e) =>
                        setNewStaff({ ...newStaff, phone: e.target.value })
                      }
                      placeholder="07XX XXX XXX"
                      className="w-full rounded-lg border border-slate-300 px-2.5 py-2"
                    />
                  </div>
                </div>
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Job Title
                  </label>
                  <input
                    type="text"
                    value={newStaff.title}
                    onChange={(e) =>
                      setNewStaff({ ...newStaff, title: e.target.value })
                    }
                    placeholder="Field & GIS Apiarist"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  />
                </div>
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Initial Password (min 6 characters) *
                  </label>
                  <input
                    type="password"
                    required
                    minLength={6}
                    value={newStaff.password}
                    onChange={(e) =>
                      setNewStaff({ ...newStaff, password: e.target.value })
                    }
                    placeholder="••••••••"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full py-2.5 rounded-xl bg-hive-900 text-honey-400 font-extrabold text-xs hover:bg-hive-800"
                >
                  + Create Staff Login Account
                </button>
              </form>
            </div>
          </div>
        ) : tab === "DROPDOWNS" ? (
          <div className="grid lg:grid-cols-12 gap-6 items-start">
            {/* Existing Dropdown Categories */}
            <div className="lg:col-span-8 grid sm:grid-cols-2 gap-4">
              {dropdowns.map((dd) => {
                let parsedOpts: string[] = [];
                try {
                  parsedOpts = JSON.parse(dd.optionsJson || "[]");
                } catch {
                  parsedOpts = [];
                }
                const defaultText = parsedOpts.join("\n");

                return (
                  <DropdownEditorCard
                    key={dd.id}
                    dropdown={dd}
                    initialText={defaultText}
                    isSaved={savedId === dd.id}
                    onSave={(text) => handleSaveDropdown(dd, text)}
                  />
                );
              })}
            </div>

            {/* Add New Dropdown Category */}
            <div className="lg:col-span-4 bg-white rounded-2xl p-6 border border-slate-200 shadow-sm sticky top-20 space-y-4">
              <h3 className="text-base font-black text-slate-900 flex items-center gap-2">
                <Plus className="w-4 h-4 text-amber-500" />
                Add Custom Field Dropdown
              </h3>
              <p className="text-xs text-slate-500">
                Create a new dropdown field that will immediately appear on the Field Technician
                data collection screen.
              </p>

              <form onSubmit={handleCreateDropdownCategory} className="space-y-3 text-xs">
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Dropdown Label *
                  </label>
                  <input
                    type="text"
                    required
                    value={newLabel}
                    onChange={(e) => setNewLabel(e.target.value)}
                    placeholder="e.g. Honey Moisture Grade"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  />
                </div>
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Section Group
                  </label>
                  <select
                    value={newGroup}
                    onChange={(e) => setNewGroup(e.target.value)}
                    className="w-full rounded-lg border border-slate-300 px-3 py-2"
                  >
                    <option>General</option>
                    <option>Site & Environment</option>
                    <option>Hive & Colony Metrics</option>
                    <option>Health & Biosecurity</option>
                    <option>Bio Fencing & Conservation</option>
                  </select>
                </div>
                <div>
                  <label className="block font-bold text-slate-700 mb-1">
                    Dropdown Options (One per line) *
                  </label>
                  <textarea
                    rows={5}
                    required
                    value={newOptionsText}
                    onChange={(e) => setNewOptionsText(e.target.value)}
                    placeholder={"Grade A (<18% Moisture)\nGrade B (18–20% Moisture)\nUncapped Frame"}
                    className="w-full rounded-lg border border-slate-300 p-2.5 font-mono text-xs"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full py-2.5 rounded-xl bg-hive-900 text-honey-400 font-extrabold text-xs hover:bg-hive-800"
                >
                  + Create Field Dropdown Category
                </button>
              </form>
            </div>
          </div>
        ) : (
          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-xs">
                <thead>
                  <tr className="bg-hive-900 text-honey-400 uppercase font-bold">
                    <th className="py-3 px-4">SKU</th>
                    <th className="py-3 px-4">Product / Service</th>
                    <th className="py-3 px-4">Min KES</th>
                    <th className="py-3 px-4">Max KES</th>
                    <th className="py-3 px-4">Unit</th>
                    <th className="py-3 px-4">Notes</th>
                    <th className="py-3 px-4 text-right">Action</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                  {catalog.map((item, idx) => (
                    <tr key={item.id} className="hover:bg-slate-50">
                      <td className="py-3 px-4 font-mono font-bold text-amber-700">
                        {item.sku}
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={item.name}
                          onChange={(e) =>
                            setCatalog((prev) =>
                              prev.map((c, i) =>
                                i === idx ? { ...c, name: e.target.value } : c
                              )
                            )
                          }
                          className="w-full border border-slate-300 rounded px-2 py-1 font-bold text-slate-900"
                        />
                      </td>
                      <td className="py-3 px-4 w-28">
                        <input
                          type="number"
                          value={item.minPriceKes}
                          onChange={(e) =>
                            setCatalog((prev) =>
                              prev.map((c, i) =>
                                i === idx
                                  ? { ...c, minPriceKes: Number(e.target.value) }
                                  : c
                              )
                            )
                          }
                          className="w-full border border-slate-300 rounded px-2 py-1 font-mono"
                        />
                      </td>
                      <td className="py-3 px-4 w-28">
                        <input
                          type="number"
                          value={item.maxPriceKes}
                          onChange={(e) =>
                            setCatalog((prev) =>
                              prev.map((c, i) =>
                                i === idx
                                  ? { ...c, maxPriceKes: Number(e.target.value) }
                                  : c
                              )
                            )
                          }
                          className="w-full border border-slate-300 rounded px-2 py-1 font-mono"
                        />
                      </td>
                      <td className="py-3 px-4 w-32">
                        <input
                          type="text"
                          value={item.unit}
                          onChange={(e) =>
                            setCatalog((prev) =>
                              prev.map((c, i) =>
                                i === idx ? { ...c, unit: e.target.value } : c
                              )
                            )
                          }
                          className="w-full border border-slate-300 rounded px-2 py-1"
                        />
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={item.notes}
                          onChange={(e) =>
                            setCatalog((prev) =>
                              prev.map((c, i) =>
                                i === idx ? { ...c, notes: e.target.value } : c
                              )
                            )
                          }
                          className="w-full border border-slate-300 rounded px-2 py-1 text-slate-600"
                        />
                      </td>
                      <td className="py-3 px-4 text-right">
                        <button
                          type="button"
                          onClick={() => handleSaveCatalogItem(item)}
                          className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-hive-900 text-honey-400 font-bold hover:bg-hive-800"
                        >
                          {savedId === item.id ? (
                            <>
                              <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                              Saved
                            </>
                          ) : (
                            <>
                              <Save className="w-3.5 h-3.5" />
                              Save
                            </>
                          )}
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

function DropdownEditorCard({
  dropdown,
  initialText,
  isSaved,
  onSave,
}: {
  dropdown: DropdownCategoryItem;
  initialText: string;
  isSaved: boolean;
  onSave: (text: string) => void;
}) {
  const [text, setText] = useState(initialText);

  return (
    <div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm flex flex-col justify-between space-y-3">
      <div>
        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded bg-amber-100 text-amber-800">
            {dropdown.groupName}
          </span>
          <span className="font-mono text-[10px] text-slate-400">{dropdown.key}</span>
        </div>
        <h3 className="text-sm font-black text-slate-900 mt-1.5">{dropdown.label}</h3>
        <p className="text-[11px] text-slate-500 mt-0.5 mb-2">
          One dropdown option per line:
        </p>
        <textarea
          rows={5}
          value={text}
          onChange={(e) => setText(e.target.value)}
          className="w-full rounded-xl border border-slate-300 p-2.5 text-xs font-medium text-slate-800 bg-slate-50 focus:bg-white focus:border-amber-500 focus:outline-none"
        />
      </div>

      <div className="flex items-center justify-between pt-1">
        <span className="text-[11px] text-slate-500">
          {text.split("\n").filter((l) => l.trim()).length} options
        </span>
        <button
          type="button"
          onClick={() => onSave(text)}
          className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-hive-900 text-honey-400 text-xs font-bold hover:bg-hive-800 transition"
        >
          {isSaved ? (
            <>
              <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
              Saved!
            </>
          ) : (
            <>
              <Save className="w-3.5 h-3.5" />
              Save Options
            </>
          )}
        </button>
      </div>
    </div>
  );
}