"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import { Card, Button, Select, SectionTitle } from "@/app/adminx/ui";

const OPTIONS = ["operational", "degraded", "maintenance", "outage"];

export function StatusSection() {
  const [status, setStatus] = useState({
    website: "operational",
    tools: "operational",
    api: "operational",
    blog: "operational",
  });
  const [saved, setSaved] = useState(false);

  const load = useCallback(async () => {
    const data = await api.get("settings");
    const s = data.settings;
    setStatus({
      website: s.status_website || "operational",
      tools: s.status_tools || "operational",
      api: s.status_api || "operational",
      blog: s.status_blog || "operational",
    });
  }, []);

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

  async function save() {
    await api.post("status", status);
    setSaved(true);
    setTimeout(() => setSaved(false), 1500);
  }

  const services = [
    { key: "website", label: "Website" },
    { key: "tools", label: "AI Tools" },
    { key: "api", label: "API Services" },
    { key: "blog", label: "Blog" },
  ];

  return (
    <div>
      <SectionTitle title="System Status" />
      <Card className="p-5">
        <p className="text-sm text-slate-500">
          Manually set the public status shown on the <a href="/status" className="text-indigo-600 hover:underline" target="_blank" rel="noreferrer">/status</a> page.
        </p>
        <div className="mt-5 space-y-3">
          {services.map((service) => (
            <div key={service.key} className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
              <p className="font-medium text-slate-800">{service.label}</p>
              <Select
                className="!w-44"
                value={(status as any)[service.key]}
                onChange={(e) => setStatus((prev) => ({ ...prev, [service.key]: e.target.value }))}
              >
                {OPTIONS.map((o) => (
                  <option key={o} value={o}>{o}</option>
                ))}
              </Select>
            </div>
          ))}
        </div>
        <div className="mt-5">
          <Button onClick={save}>{saved ? "Saved ✓" : "Save Status"}</Button>
        </div>
      </Card>
    </div>
  );
}