src/pages/Settings.tsx

import { 
  KeyRound, 
  Plus, 
  Trash2, 
  Copy, 
  CheckCircle2, 
  AlertCircle, 
  ShieldCheck, 
  Sparkles, 
  Globe, 
  Clock, 
  Sliders, 
  Terminal, 
  Activity,
  Database
} from "lucide-react";
import { useState, useEffect } from "react";
import { useApiKey } from "../context/ApiKeyContext";
import { apiClient } from "../lib/apiClient";
import FormDrawer from "../components/FormDrawer";
import ConfirmModal from "../components/ConfirmModal";
import toast from "react-hot-toast";
import { supabase, isSupabaseConfigured, supabaseProjectRef, supabaseDashboardUrl } from "../lib/supabaseClient";

export default function Settings() {
  const { apiKeys, activeKeyId, setActiveKeyId, addApiKey, removeApiKey, renameApiKey } = useApiKey();
  const [activeTab, setActiveTab] = useState<"keys" | "preferences" | "sandbox" | "database">("keys");
  const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
  const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
  const [testResult, setTestResult] = useState<{ status: "idle" | "testing" | "success" | "error"; message?: string; latency?: number }>({ status: "idle" });
  const [supabaseStatus, setSupabaseStatus] = useState<"testing" | "connected" | "error" | "unconfigured">("testing");

  useEffect(() => {
    async function checkSupabase() {
      if (!isSupabaseConfigured() || !supabase) {
        setSupabaseStatus("unconfigured");
        return;
      }
      try {
        // Simple ping to check if credentials are valid
        // Using auth.getSession() as a lightweight check
        const { error } = await supabase.auth.getSession();
        if (error) throw error;
        setSupabaseStatus("connected");
      } catch (err) {
        console.error("Supabase connection error:", err);
        setSupabaseStatus("error");
      }
    }
    
    if (activeTab === "database") {
      checkSupabase();
    }
  }, [activeTab]);

  const testActiveConnection = async () => {
    setTestResult({ status: "testing" });
    const startTime = Date.now();

    try {
      const res = await apiClient.get("/campaigns");
      const latency = Date.now() - startTime;
      setTestResult({
        status: "success",
        message: `Connected successfully. Response latency: ${latency}ms. Found ${res.data?.length || 0} campaigns.`,
        latency,
      });
      toast.success("API Key verified successfully");
    } catch (err: any) {
      setTestResult({
        status: "error",
        message: err.response?.data?.error || "Failed to reach BRIDGEModulE API gateway",
      });
      toast.error("API connection test failed");
    }
  };

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5">
          <KeyRound className="w-6 h-6 text-indigo-400" />
          Settings & API Credentials
        </h1>
        <p className="text-zinc-400 text-sm mt-1">
            Manage BRIDGEModulE API keys, system preferences, and test live gateway endpoints.
        </p>
      </div>

      {/* Tabs */}
      <div className="border-b border-zinc-800 flex items-center gap-2 text-sm font-medium">
        <button
          onClick={() => setActiveTab("keys")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "keys"
              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <KeyRound className="w-4 h-4" /> API Key Manager ({apiKeys.length})
        </button>
        <button
          onClick={() => setActiveTab("preferences")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "preferences"
              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <Sliders className="w-4 h-4" /> System Preferences
        </button>
        <button
          onClick={() => setActiveTab("sandbox")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "sandbox"
              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <Terminal className="w-4 h-4" /> API Sandbox & Architecture
        </button>
        <button
          onClick={() => setActiveTab("database")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "database"
              ? "border-emerald-500 text-emerald-400 bg-emerald-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <Database className="w-4 h-4" /> Supabase Connection
        </button>
      </div>

      {/* TAB 1: API KEYS */}
      {activeTab === "keys" && (
        <div className="space-y-6 max-w-4xl">
          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 shadow-sm space-y-4">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h3 className="text-base font-semibold text-zinc-100">Configured BRIDGEModulE API Keys</h3>
                <p className="text-xs text-zinc-400 mt-0.5">
                  Store multiple keys for distinct environments or client workspaces.
                </p>
              </div>

              <div className="flex items-center gap-2">
                <button
                  onClick={testActiveConnection}
                  disabled={testResult.status === "testing"}
                  className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 border border-zinc-700"
                >
                  <Activity className="w-3.5 h-3.5 text-emerald-400" />
                  {testResult.status === "testing" ? "Testing..." : "Test Connection"}
                </button>
                <button
                  onClick={() => setIsAddKeyOpen(true)}
                  className="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5"
                >
                  <Plus className="w-3.5 h-3.5" /> Add API Key
                </button>
              </div>
            </div>

            {/* Test Connection Banner */}
            {testResult.status === "success" && (
              <div className="p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-lg flex items-center gap-2.5 text-xs text-emerald-400">
                <CheckCircle2 className="w-4 h-4 shrink-0" />
                <span>{testResult.message}</span>
              </div>
            )}
            {testResult.status === "error" && (
              <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-lg flex items-center gap-2.5 text-xs text-rose-400">
                <AlertCircle className="w-4 h-4 shrink-0" />
                <span>{testResult.message}</span>
              </div>
            )}

            {/* Keys List */}
            <div className="space-y-3 pt-2">
              {apiKeys.map((k) => {
                const isActive = k.id === activeKeyId;
                const maskedKey = k.key.length > 8 
                  ? `${k.key.substring(0, 4)}••••••••••••••••${k.key.substring(k.key.length - 4)}` 
                  : "••••••••••••";

                return (
                  <div
                    key={k.id}
                    className={`p-4 rounded-xl border transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${
                      isActive
                        ? "bg-indigo-950/20 border-indigo-500/40 shadow-sm"
                        : "bg-zinc-950/60 border-zinc-800/80 hover:border-zinc-700"
                    }`}
                  >
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-semibold text-xs text-zinc-100">{k.name}</span>
                        {isActive && (
                          <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">
                            Active Key
                          </span>
                        )}
                      </div>
                      <div className="font-mono text-xs text-zinc-400 mt-1 flex items-center gap-2">
                        <span>{maskedKey}</span>
                        <button
                          onClick={() => {
                            navigator.clipboard.writeText(k.key);
                            toast.success("API key copied to clipboard");
                          }}
                          className="text-zinc-500 hover:text-zinc-300 p-1"
                        >
                          <Copy className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>

                    <div className="flex items-center gap-2">
                      {!isActive && (
                        <button
                          onClick={() => {
                            setActiveKeyId(k.id);
                            toast.success(`Switched active key to "${k.name}"`);
                          }}
                          className="px-3 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-medium rounded-md transition-colors"
                        >
                          Set as Active
                        </button>
                      )}
                      <button
                        onClick={() => setKeyToDelete(k.id)}
                        className="p-1.5 text-zinc-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-md transition-colors"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                );
              })}

              {apiKeys.length === 0 && (
                <div className="p-8 text-center text-xs text-zinc-500 bg-zinc-950/40 rounded-xl border border-dashed border-zinc-800">
                  No custom API keys saved. The app is currently operating in high-fidelity mock database mode.
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* TAB 2: PREFERENCES */}
      {activeTab === "preferences" && (
        <div className="space-y-6 max-w-2xl bg-zinc-900 border border-zinc-800 rounded-xl p-6">
          <h3 className="text-base font-semibold text-zinc-100 mb-4">Workspace Outreach Defaults</h3>
          <div className="space-y-4 text-xs">
            <div>
              <label className="block font-medium text-zinc-300 mb-1">Default Sending Timezone</label>
              <select
                defaultValue="America/New_York"
                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-100"
              >
                <option value="America/New_York">America/New_York (EST)</option>
                <option value="America/Chicago">America/Chicago (CST)</option>
                <option value="America/Los_Angeles">America/Los_Angeles (PST)</option>
                <option value="Europe/London">Europe/London (GMT)</option>
              </select>
            </div>

            <div>
              <label className="block font-medium text-zinc-300 mb-1">Global Mailbox Rate Limiting</label>
              <input
                type="number"
                defaultValue="50"
                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-100"
              />
              <span className="text-[11px] text-zinc-500 mt-1 block">Maximum outbound emails per mailbox / 24 hours</span>
            </div>

            <div className="pt-4 flex justify-end">
              <button
                type="button"
                onClick={() => toast.success("Preferences updated")}
                className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium"
              >
                Save Preferences
              </button>
            </div>
          </div>
        </div>
      )}

      {/* TAB 3: SANDBOX */}
      {activeTab === "sandbox" && (
        <div className="space-y-4 max-w-4xl bg-zinc-900 border border-zinc-800 rounded-xl p-6">
          <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
            <Terminal className="w-5 h-5 text-indigo-400" /> Backend Gateway Architecture
          </h3>
          <p className="text-xs text-zinc-400 leading-relaxed">
            All requests from the frontend client route securely through the Node.js/Express proxy (`/api/*`).
            The proxy attaches the active API key as a query parameter (`?api_key=...`) to the core REST API endpoint (`https://server.smartlead.ai/api/v1`).
          </p>

          <div className="p-4 bg-zinc-950 border border-zinc-800 rounded-lg font-mono text-xs text-zinc-300 space-y-2">
            <span className="text-emerald-400"># Example Proxy Request</span><br />
            GET /api/campaigns → https://server.smartlead.ai/api/v1/campaigns?api_key=&#123;KEY&#125;<br />
            POST /api/leads/search → https://server.smartlead.ai/api/v1/leads/?api_key=&#123;KEY&#125;
          </div>
        </div>
      )}

      {/* TAB 4: DATABASE / SUPABASE */}
      {activeTab === "database" && (
        <div className="space-y-6 max-w-4xl">
          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 shadow-sm space-y-6">
            <div>
              <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
                <Database className="w-5 h-5 text-emerald-400" /> Supabase Integration Status
              </h3>
              <p className="text-xs text-zinc-400 mt-1">
                Check the connection to your Supabase project instance ({supabaseProjectRef()}). 
                To configure, provide your URL and Anon Key in your environment variables.
              </p>
            </div>

            <div className={`p-4 rounded-xl border flex items-start gap-4 transition-colors ${
              supabaseStatus === "connected" ? "bg-emerald-500/10 border-emerald-500/30" :
              supabaseStatus === "unconfigured" ? "bg-amber-500/10 border-amber-500/30" :
              supabaseStatus === "error" ? "bg-rose-500/10 border-rose-500/30" :
              "bg-zinc-950/60 border-zinc-800"
            }`}>
              {supabaseStatus === "connected" && <CheckCircle2 className="w-6 h-6 text-emerald-400 shrink-0" />}
              {supabaseStatus === "unconfigured" && <AlertCircle className="w-6 h-6 text-amber-400 shrink-0" />}
              {supabaseStatus === "error" && <AlertCircle className="w-6 h-6 text-rose-400 shrink-0" />}
              {supabaseStatus === "testing" && <Activity className="w-6 h-6 text-zinc-400 shrink-0 animate-pulse" />}

              <div className="space-y-1">
                <h4 className={`text-sm font-semibold ${
                  supabaseStatus === "connected" ? "text-emerald-400" :
                  supabaseStatus === "unconfigured" ? "text-amber-400" :
                  supabaseStatus === "error" ? "text-rose-400" :
                  "text-zinc-300"
                }`}>
                  {supabaseStatus === "connected" ? "Connection Established" :
                   supabaseStatus === "unconfigured" ? "Missing Credentials" :
                   supabaseStatus === "error" ? "Connection Failed" :
                   "Testing Connection..."}
                </h4>
                <p className="text-xs text-zinc-400 leading-relaxed">
                  {supabaseStatus === "connected" ? `Successfully communicating with Supabase project ${supabaseProjectRef()}.` :
                   supabaseStatus === "unconfigured" ? "Cannot connect to Supabase. Please ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in your environment variables (.env file)." :
                   supabaseStatus === "error" ? "Failed to establish a connection with the provided credentials. Please verify your Project URL and Anon Key." :
                   "Pinging Supabase endpoints..."}
                </p>
              </div>
            </div>

            <div className="space-y-3 pt-2">
              <h4 className="text-sm font-semibold text-zinc-200">Configuration Guide</h4>
              <ol className="list-decimal list-inside space-y-2 text-xs text-zinc-400">
                <li>Go to your Supabase Dashboard: <a href={supabaseDashboardUrl()} target="_blank" rel="noreferrer" className="text-emerald-400 hover:underline">Project {supabaseProjectRef()}</a></li>
                <li>Navigate to Project Settings {"->"} API.</li>
                <li>Copy the <strong>Project URL</strong> and add it to <code className="bg-zinc-950 px-1 py-0.5 rounded text-zinc-300">VITE_SUPABASE_URL</code>.</li>
                <li>Copy the <strong>anon public</strong> key and add it to <code className="bg-zinc-950 px-1 py-0.5 rounded text-zinc-300">VITE_SUPABASE_ANON_KEY</code>.</li>
              </ol>
            </div>
          </div>
        </div>
      )}

      {/* Add Key Drawer */}
      <FormDrawer
        isOpen={isAddKeyOpen}
        onClose={() => setIsAddKeyOpen(false)}
        title="Add BRIDGEModulE API Key"
        subtitle="Retrieve your API key from Settings -> Profile -> API Keys"
      >
        <form
          onSubmit={(e) => {
            e.preventDefault();
            const form = e.target as HTMLFormElement;
            const name = (form.elements.namedItem("name") as HTMLInputElement).value;
            const key = (form.elements.namedItem("key") as HTMLInputElement).value;

            addApiKey(name, key);
            toast.success("API Key saved & activated");
            setIsAddKeyOpen(false);
          }}
          className="space-y-4 text-xs"
        >
          <div>
            <label className="block font-medium text-zinc-300 mb-1">Key Friendly Name *</label>
            <input name="name" required placeholder="e.g. Production Main Key" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
          </div>
          <div>
            <label className="block font-medium text-zinc-300 mb-1">API Key Token *</label>
            <input name="key" type="password" required placeholder="sl_live_..." className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 font-mono" />
          </div>

          <div className="pt-4 flex justify-end gap-2 border-t border-zinc-800">
            <button
              type="button"
              onClick={() => setIsAddKeyOpen(false)}
              className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium shadow"
            >
              Save Key
            </button>
          </div>
        </form>
      </FormDrawer>

      {/* Delete Key Modal */}
      <ConfirmModal
        isOpen={Boolean(keyToDelete)}
        onClose={() => setKeyToDelete(null)}
        onConfirm={() => {
          if (keyToDelete) {
            removeApiKey(keyToDelete);
            toast.success("API key deleted");
            setKeyToDelete(null);
          }
        }}
        title="Delete API Key"
        description="Are you sure you want to remove this stored API key?"
      />
    </div>
  );
}