"use client";

import { useEffect, useState, useCallback } from "react";
import { configureSAML, getSAMLConfig, SAMLConfig } from "@/lib/api";
import { KeyRound, CheckCircle, X, Loader2, Save, Link2 } from "lucide-react";

export function SSOConfig() {
  const [config, setConfig] = useState<SAMLConfig | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [enabled, setEnabled] = useState(false);

  // Form state
  const [entryPoint, setEntryPoint] = useState("");
  const [issuer, setIssuer] = useState("");
  const [cert, setCert] = useState("");
  const [domain, setDomain] = useState("");

  const loadConfig = useCallback(() => {
    setLoading(true);
    getSAMLConfig()
      .then((data) => {
        if (data) {
          setConfig(data);
          setEnabled(data.enabled);
          setEntryPoint(data.entry_point || "");
          setIssuer(data.issuer || "");
          setCert(data.cert || "");
          setDomain(data.domain || "");
        }
      })
      .catch((err) => {
        console.error("Failed to load SAML config:", err);
      })
      .finally(() => setLoading(false));
  }, []);

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

  const handleSave = () => {
    if (!entryPoint.trim() || !issuer.trim() || !cert.trim() || !domain.trim()) return;
    setSaving(true);
    setError("");
    configureSAML({
      entry_point: entryPoint.trim(),
      issuer: issuer.trim(),
      cert: cert.trim(),
      domain: domain.trim(),
    })
      .then((saved) => {
        setConfig(saved);
        setEnabled(saved.enabled);
      })
      .catch((err) => {
        console.error("Failed to save SAML config:", err);
        setError("Failed to save SAML configuration");
      })
      .finally(() => setSaving(false));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-8 text-gray-400">
        <Loader2 size={20} className="animate-pulse" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <KeyRound size={20} className="text-slack-purple" />
          <h3 className="text-sm font-semibold text-gray-800">SAML SSO Configuration</h3>
        </div>
        {enabled ? (
          <span className="inline-flex items-center gap-1 text-xs font-medium text-slack-green">
            <CheckCircle size={12} /> Enabled
          </span>
        ) : (
          <span className="inline-flex items-center gap-1 text-xs font-medium text-gray-400">
            <X size={12} /> Not configured
          </span>
        )}
      </div>

      {config?.sign_in_url && (
        <div className="p-3 rounded-lg border border-gray-200 bg-gray-50">
          <p className="text-xs font-semibold text-gray-500 uppercase mb-1">Sign-in URL</p>
          <div className="flex items-center gap-2">
            <Link2 size={14} className="text-gray-400 flex-shrink-0" />
            <code className="text-xs text-gray-700 break-all">{config.sign_in_url}</code>
          </div>
        </div>
      )}

      {/* Form */}
      <div className="space-y-3">
        <div>
          <label className="text-xs font-medium text-gray-500 mb-1 block">
            Identity Provider (IdP) Entry Point URL
          </label>
          <input
            type="url"
            value={entryPoint}
            onChange={(e) => setEntryPoint(e.target.value)}
            placeholder="https://your-idp.com/sso/saml"
            className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
        </div>
        <div>
          <label className="text-xs font-medium text-gray-500 mb-1 block">
            Issuer / Entity ID
          </label>
          <input
            type="text"
            value={issuer}
            onChange={(e) => setIssuer(e.target.value)}
            placeholder="https://your-idp.com/issuer"
            className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
        </div>
        <div>
          <label className="text-xs font-medium text-gray-500 mb-1 block">
            X.509 Certificate
          </label>
          <textarea
            value={cert}
            onChange={(e) => setCert(e.target.value)}
            placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
            rows={4}
            className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
        </div>
        <div>
          <label className="text-xs font-medium text-gray-500 mb-1 block">
            Workspace Domain
          </label>
          <input
            type="text"
            value={domain}
            onChange={(e) => setDomain(e.target.value)}
            placeholder="yourcompany.com"
            className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
        </div>
      </div>

      <button
        onClick={handleSave}
        disabled={saving || !entryPoint.trim() || !issuer.trim() || !cert.trim() || !domain.trim()}
        className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
      >
        {saving ? <Loader2 size={14} className="animate-pulse" /> : <Save size={14} />}
        Save Configuration
      </button>

      {error && <p className="text-xs text-slack-red">{error}</p>}
    </div>
  );
}

export default SSOConfig;