"use client";

import { useEffect, useState } from "react";
import { Button, Card, Input, Label } from "@/components/ui";
import { Database, KeyRound, Loader2, CheckCircle, AlertCircle, Save } from "lucide-react";

type Settings = {
  manager_url: string;
  template_db: string;
  default_mode: "template" | "empty";
  template_login: string;
  master_pwd_set: boolean;
  template_pwd_set: boolean;
};

export default function AdminOdooContent() {
  const [settings, setSettings] = useState<Settings | null>(null);
  const [masterPwd, setMasterPwd] = useState("");
  const [managerUrl, setManagerUrl] = useState("");
  const [templateDb, setTemplateDb] = useState("");
  const [templateLogin, setTemplateLogin] = useState("");
  const [templatePassword, setTemplatePassword] = useState("");
  const [defaultMode, setDefaultMode] = useState<"template" | "empty">("template");
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);

  useEffect(() => {
    fetch("/api/admin/odoo-settings")
      .then((r) => r.json())
      .then((s: Settings) => {
        setSettings(s);
        setManagerUrl(s.manager_url);
        setTemplateDb(s.template_db);
        setTemplateLogin(s.template_login);
        setDefaultMode(s.default_mode);
      })
      .catch(() => setMsg({ ok: false, text: "Failed to load settings." }));
  }, []);

  async function save() {
    setSaving(true);
    setMsg(null);
    const body: Record<string, string> = {
      manager_url: managerUrl,
      template_db: templateDb,
      default_mode: defaultMode,
      template_login: templateLogin || "admin",
    };
    if (masterPwd.trim()) body.master_pwd = masterPwd.trim();
    if (templatePassword.trim()) body.template_password = templatePassword.trim();
    const res = await fetch("/api/admin/odoo-settings", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    setSaving(false);
    if (res.ok) {
      setMasterPwd("");
      setTemplatePassword("");
      setMsg({ ok: true, text: "Settings saved." });
      setSettings((prev) =>
        prev
          ? {
              ...prev,
              master_pwd_set: prev.master_pwd_set || Boolean(body.master_pwd),
              template_pwd_set: prev.template_pwd_set || Boolean(body.template_password),
            }
          : prev
      );
    } else {
      const b = await res.json().catch(() => ({}));
      setMsg({ ok: false, text: b.error || "Save failed." });
    }
  }

  async function test() {
    setTesting(true);
    setMsg(null);
    const res = await fetch("/api/admin/odoo-settings", { method: "POST" });
    const b = await res.json().catch(() => ({}));
    setTesting(false);
    setMsg({ ok: Boolean(b.ok), text: b.message || (res.ok ? "OK" : "Test failed.") });
  }

  return (
    <div className="mx-auto max-w-2xl">
      <div className="mb-6 flex items-center gap-3">
        <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-brand/10 text-brand">
          <Database size={22} />
        </span>
        <div>
          <h1 className="text-2xl font-bold text-ink">Odoo ERP Settings</h1>
          <p className="text-sm text-slate-500">Configure the shared Odoo database manager used to provision a system per client.</p>
        </div>
      </div>

      <Card className="grid gap-5">
        <div>
          <Label htmlFor="managerUrl">Manager URL</Label>
          <Input
            id="managerUrl"
            value={managerUrl}
            onChange={(e) => setManagerUrl(e.target.value)}
            placeholder="https://your-odoo.example.com/web/database/manager"
          />
          <p className="mt-1 text-xs text-slate-500">Full URL to the Odoo database manager. The origin is used for the create/duplicate API calls.</p>
        </div>

        <div>
          <Label htmlFor="masterPwd">
            <span className="inline-flex items-center gap-1">
              <KeyRound size={14} /> Master Password
            </span>
          </Label>
          <Input
            id="masterPwd"
            type="password"
            value={masterPwd}
            onChange={(e) => setMasterPwd(e.target.value)}
            placeholder={settings?.master_pwd_set ? "•••••••• (set — leave blank to keep)" : "Enter Odoo master password"}
          />
          <p className="mt-1 text-xs text-slate-500">
            Stored encrypted (AES-256-GCM). Never sent back to the browser. {settings?.master_pwd_set ? "Currently set." : "Not set yet."}
          </p>
        </div>

        <div>
          <Label htmlFor="templateDb">Template database (for cloning)</Label>
          <Input id="templateDb" value={templateDb} onChange={(e) => setTemplateDb(e.target.value)} placeholder="Demo" />
          <p className="mt-1 text-xs text-slate-500">Name of the source database clients are cloned from when they pick &quot;template&quot;.</p>
        </div>

        <div className="grid gap-4 rounded-lg border border-slate-200 bg-slate-50 p-4 sm:grid-cols-2">
          <div className="sm:col-span-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
            Template admin login (inherited by every clone)
          </div>
          <div>
            <Label htmlFor="templateLogin">Template login</Label>
            <Input id="templateLogin" value={templateLogin} onChange={(e) => setTemplateLogin(e.target.value)} placeholder="admin" />
          </div>
          <div>
            <Label htmlFor="templatePassword">Template password</Label>
            <Input
              id="templatePassword"
              type="password"
              value={templatePassword}
              onChange={(e) => setTemplatePassword(e.target.value)}
              placeholder={settings?.template_pwd_set ? "•••••••• (set — blank keeps it)" : "Template admin password"}
            />
          </div>
          <p className="sm:col-span-2 text-xs text-slate-500">
            These are the credentials handed to each client (and their agent) when cloning from the template. Stored encrypted.
          </p>
        </div>

        <div>
          <Label htmlFor="defaultMode">Default provisioning mode</Label>
          <select
            id="defaultMode"
            value={defaultMode}
            onChange={(e) => setDefaultMode(e.target.value as "template" | "empty")}
            className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-ink focus:border-brand focus:outline-none"
          >
            <option value="template">Clone from template (Demo)</option>
            <option value="empty">Empty database</option>
          </select>
        </div>

        {msg && (
          <div
            className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm ${
              msg.ok ? "bg-emerald-50 text-emerald-800" : "bg-red-50 text-red-700"
            }`}
          >
            {msg.ok ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
            {msg.text}
          </div>
        )}

        <div className="flex flex-wrap gap-3">
          <Button onClick={save} disabled={saving}>
            {saving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
            {saving ? "Saving..." : "Save settings"}
          </Button>
          <Button onClick={test} disabled={testing} className="bg-slate-700 hover:bg-slate-800">
            {testing ? <Loader2 size={16} className="animate-spin" /> : <Database size={16} />}
            {testing ? "Testing..." : "Test connection"}
          </Button>
        </div>
      </Card>
    </div>
  );
}