"use client";

import { useEffect, useState } from "react";

interface Secret {
  id: string;
  name: string;
  key: string;
  updatedAt: string;
}

const SUGGESTED_SECRETS = [
  { name: "AWS Access Key ID", key: "AWS_ACCESS_KEY_ID", description: "Required for AWS Bedrock provider" },
  { name: "AWS Secret Access Key", key: "AWS_SECRET_ACCESS_KEY", description: "Required for AWS Bedrock provider" },
  { name: "AWS Region", key: "AWS_REGION", description: "AWS region for Bedrock (e.g. eu-central-1)" },
  { name: "Anthropic API Key", key: "ANTHROPIC_API_KEY", description: "Direct Anthropic API access" },
  { name: "OpenAI API Key", key: "OPENAI_API_KEY", description: "For OpenAI-based tools and scripts" },
];

export default function SecretsPage() {
  const [secrets, setSecrets] = useState<Secret[]>([]);
  const [loading, setLoading] = useState(true);
  const [name, setName] = useState("");
  const [key, setKey] = useState("");
  const [value, setValue] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  async function loadSecrets() {
    const res = await fetch("/api/secrets");
    setSecrets(await res.json());
    setLoading(false);
  }

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

  async function addSecret() {
    if (!name || !key || !value) { setError("All fields are required"); return; }
    setSaving(true);
    setError("");
    const res = await fetch("/api/secrets", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, key, value }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(data.error || "Failed to save secret");
    } else {
      setName(""); setKey(""); setValue("");
      await loadSecrets();
    }
    setSaving(false);
  }

  async function deleteSecret(id: string) {
    if (!confirm("Delete this secret?")) return;
    await fetch(`/api/secrets/${id}`, { method: "DELETE" });
    await loadSecrets();
  }

  function prefillSuggested(s: { name: string; key: string }) {
    setName(s.name);
    setKey(s.key);
    setValue("");
    setError("");
    // Focus the value input
    setTimeout(() => document.getElementById("sec-value")?.focus(), 50);
  }

  const existingKeys = new Set(secrets.map((s) => s.key));
  const availableSuggestions = SUGGESTED_SECRETS.filter((s) => !existingKeys.has(s.key));

  if (loading) return <div className="container"><p className="text-muted">Loading...</p></div>;

  return (
    <div>
      <h1 className="mb-6">Secrets</h1>

      <div className="card mb-6">
        <p style={{ marginTop: 0 }}>
          Secrets are encrypted and injected as environment variables into your bot sessions.
          Any tool or script that Claude runs inside your session can use them.
        </p>
        <p className="text-muted text-sm" style={{ marginBottom: 0 }}>
          You can add any custom environment variable. The Claude Code OAuth token is managed
          separately on the <a href="/settings">Settings</a> page.
        </p>
      </div>

      {/* Suggested secrets */}
      {availableSuggestions.length > 0 && (
        <div className="card mb-6">
          <h2 style={{ marginTop: 0 }}>Quick Add</h2>
          <p className="text-muted text-sm mb-4">
            Common environment variables you might want to configure:
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
            {availableSuggestions.map((s) => (
              <button
                key={s.key}
                className="btn"
                style={{ fontSize: "0.85rem" }}
                onClick={() => prefillSuggested(s)}
                title={s.description}
              >
                {s.key}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Existing secrets */}
      {secrets.length > 0 && (
        <div className="mb-6">
          <h2>Your Secrets</h2>
          {secrets.map((s) => (
            <div key={s.id} className="card mb-4 flex justify-between items-center">
              <div>
                <strong>{s.name}</strong>
                <span className="text-mono text-sm text-muted" style={{ marginLeft: "0.75rem" }}>{s.key}</span>
                <p className="text-muted text-sm mt-1">
                  Updated {new Date(s.updatedAt).toLocaleDateString()}
                </p>
              </div>
              <button className="btn btn-danger" onClick={() => deleteSecret(s.id)}>Delete</button>
            </div>
          ))}
        </div>
      )}

      {/* Add new */}
      <div className="card">
        <h2 style={{ marginTop: 0 }}>Add Secret</h2>
        <div className="grid-2 mb-4">
          <div>
            <label className="label" htmlFor="sec-name">Display name</label>
            <input id="sec-name" className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Anthropic API Key" />
          </div>
          <div>
            <label className="label" htmlFor="sec-key">Environment variable</label>
            <input id="sec-key" className="input" value={key} onChange={(e) => setKey(e.target.value)} placeholder="e.g. ANTHROPIC_API_KEY" />
          </div>
        </div>
        <div className="mb-4">
          <label className="label" htmlFor="sec-value">Value</label>
          <input id="sec-value" className="input" type="password" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Secret value (encrypted before storage)" />
        </div>
        {error && <p className="text-sm mb-4" style={{ color: "var(--danger)" }}>{error}</p>}
        <button className="btn btn-primary" onClick={addSecret} disabled={saving}>
          {saving ? "Saving..." : "Add Secret"}
        </button>
      </div>
    </div>
  );
}