import { useEffect, useState } from "react";
import { Save, Settings2, X } from "lucide-react";

import { appopsClient } from "@/api/appopsClient";
import type { App } from "@/types/appops";
import { showError, showSuccess } from "@/utils/toast";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { formatOperatorError } from "@/lib/operatorError";

const criticalities: App["criticality"][] = ["low", "medium", "high", "critical"];

interface AppMetadataEditorProps {
  app: App;
  onSaved: (app: App) => void;
}

export const AppMetadataEditor = ({ app, onSaved }: AppMetadataEditorProps) => {
  const [editing, setEditing] = useState(false);
  const [busy, setBusy] = useState(false);
  const [name, setName] = useState(app.name);
  const [category, setCategory] = useState(app.category);
  const [criticality, setCriticality] = useState<App["criticality"]>(app.criticality);

  useEffect(() => {
    if (editing) return;
    setName(app.name);
    setCategory(app.category);
    setCriticality(app.criticality);
  }, [app, editing]);

  const save = async () => {
    if (!name.trim() || !category.trim() || busy) return;
    setBusy(true);
    try {
      const result = await appopsClient.updateAppMetadata(app.id, {
        name: name.trim(),
        category: category.trim(),
        criticality,
      });
      if (!result.success || !result.app) {
        showError(result.message || "App-metadata kon niet worden opgeslagen.");
        return;
      }
      onSaved(result.app);
      setEditing(false);
      showSuccess("App-metadata opgeslagen.");
    } catch (error) {
      showError(formatOperatorError(error, "App-metadata kon niet worden opgeslagen."));
    } finally {
      setBusy(false);
    }
  };

  if (!editing) {
    return (
      <Button type="button" size="sm" variant="outline" onClick={() => setEditing(true)} className="w-full border-slate-800 bg-slate-950 text-slate-300">
        <Settings2 className="mr-2 h-4 w-4" /> Metadata wijzigen
      </Button>
    );
  }

  return (
    <div className="space-y-4 border-t border-slate-800 pt-4">
      <div className="space-y-1.5">
        <Label htmlFor="app-metadata-name" className="text-[10px] font-bold uppercase text-slate-500">Naam</Label>
        <Input id="app-metadata-name" value={name} onChange={event => setName(event.target.value)} maxLength={80} className="border-slate-800 bg-slate-950" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="app-metadata-category" className="text-[10px] font-bold uppercase text-slate-500">Categorie</Label>
        <Input id="app-metadata-category" value={category} onChange={event => setCategory(event.target.value)} maxLength={40} placeholder="Bijv. Productivity, Monitoring of Dev" className="border-slate-800 bg-slate-950" />
      </div>
      <div className="space-y-1.5">
        <Label className="text-[10px] font-bold uppercase text-slate-500">Criticality</Label>
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
          {criticalities.map(level => (
            <Button key={level} type="button" size="sm" variant="outline" onClick={() => setCriticality(level)} className={cn("border-slate-800 bg-slate-950 capitalize", criticality === level && "border-blue-500/50 bg-blue-500/10 text-blue-200")}>
              {level}
            </Button>
          ))}
        </div>
      </div>
      <p className="text-[10px] leading-4 text-slate-500">Wijzigt alleen de AppOps-catalogus. Containers, connectorconfig, protection en voice blijven ongewijzigd.</p>
      <div className="flex gap-2">
        <Button type="button" size="sm" onClick={save} disabled={busy || !name.trim() || !category.trim()} className="flex-1">
          <Save className="mr-2 h-4 w-4" /> {busy ? "Opslaan..." : "Opslaan"}
        </Button>
        <Button type="button" size="sm" variant="outline" onClick={() => setEditing(false)} disabled={busy} className="border-slate-800 bg-slate-950">
          <X className="mr-2 h-4 w-4" /> Annuleren
        </Button>
      </div>
    </div>
  );
};