'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
import KeyDisplay from '@/components/admin/KeyDisplay';
import AdminFormInput from '@/components/admin/AdminFormInput';
import AdminButton from '@/components/admin/AdminButton';
import { Section } from '@/components/shared/Section';

const STORAGE_KEY = 'banatie_master_key';

export default function ApiKeysPage() {
  const router = useRouter();
  const [masterKey, setMasterKey] = useState('');
  const [orgSlug, setOrgSlug] = useState('');
  const [projectSlug, setProjectSlug] = useState('');
  const [generatedKey, setGeneratedKey] = useState('');
  const [apiKeys, setApiKeys] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  // Check for master key on mount
  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (!saved) {
      router.push('/admin/master');
    } else {
      setMasterKey(saved);
      // Load API keys with the saved master key
      listApiKeys(saved).then(setApiKeys);
    }
  }, [router]);

  const loadApiKeys = async () => {
    if (masterKey) {
      const keys = await listApiKeys(masterKey);
      setApiKeys(keys);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccess('');
    setGeneratedKey('');

    const result = await createProjectApiKey(masterKey, orgSlug, projectSlug);

    if (result.success && result.apiKey) {
      setGeneratedKey(result.apiKey);
      setSuccess('API key created successfully!');
      // Clear form
      setOrgSlug('');
      setProjectSlug('');
      // Reload keys list
      await loadApiKeys();
    } else {
      setError(result.error || 'Failed to create API key');
    }

    setLoading(false);
  };

  if (!masterKey) {
    return null; // Will redirect
  }

  return (
    <Section>
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1>
        <p className="text-slate-400">
          Generate API keys for your projects. Organizations and projects will be created
          automatically if they don't exist.
        </p>
      </div>

      {/* Messages */}
      {error && (
        <div className="mb-6 p-4 bg-red-900/30 border border-red-700 rounded-lg text-red-300">
          {error}
        </div>
      )}
      {success && (
        <div className="mb-6 p-4 bg-green-900/30 border border-green-700 rounded-lg text-green-300">
          {success}
        </div>
      )}

      {/* Generated Key Display */}
      {generatedKey && (
        <div className="mb-8 p-6 bg-slate-800/50 backdrop-blur-sm border border-amber-700 rounded-2xl">
          <h2 className="text-2xl font-semibold text-white mb-4">New API Key Generated</h2>
          <p className="text-amber-400 mb-4 text-sm">
            ⚠️ Save this key now! You won't be able to see it again.
          </p>
          <KeyDisplay apiKey={generatedKey} />
        </div>
      )}

      {/* Create Key Form */}
      <div className="mb-8 p-6 bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl">
        <h2 className="text-2xl font-semibold text-white mb-6">Create New API Key</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <AdminFormInput
            label="Organization Slug"
            value={orgSlug}
            onChange={setOrgSlug}
            placeholder="my-org"
            required
          />
          <AdminFormInput
            label="Project Slug"
            value={projectSlug}
            onChange={setProjectSlug}
            placeholder="my-project"
            required
          />
          <AdminButton type="submit" disabled={loading}>
            {loading ? 'Creating...' : 'Create API Key'}
          </AdminButton>
        </form>
      </div>

      {/* API Keys List */}
      <div className="p-6 bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl">
        <h2 className="text-2xl font-semibold text-white mb-6">Recent API Keys</h2>
        {apiKeys.length === 0 ? (
          <p className="text-slate-400">No API keys created yet.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead>
                <tr className="border-b border-slate-700">
                  <th className="pb-3 text-sm font-medium text-slate-400">Type</th>
                  <th className="pb-3 text-sm font-medium text-slate-400">Organization</th>
                  <th className="pb-3 text-sm font-medium text-slate-400">Project</th>
                  <th className="pb-3 text-sm font-medium text-slate-400">Created</th>
                  <th className="pb-3 text-sm font-medium text-slate-400">Expires</th>
                  <th className="pb-3 text-sm font-medium text-slate-400">Status</th>
                </tr>
              </thead>
              <tbody>
                {apiKeys.map((key) => (
                  <tr key={key.id} className="border-b border-slate-800">
                    <td className="py-3 text-sm text-slate-300">
                      <span
                        className={`px-2 py-1 rounded text-xs font-medium ${
                          key.keyType === 'master'
                            ? 'bg-amber-900/30 text-amber-400'
                            : 'bg-blue-900/30 text-blue-400'
                        }`}
                      >
                        {key.keyType}
                      </span>
                    </td>
                    <td className="py-3 text-sm text-slate-300">
                      {key.organizationName || '-'}
                      {key.organizationEmail && (
                        <div className="text-xs text-slate-500">{key.organizationEmail}</div>
                      )}
                    </td>
                    <td className="py-3 text-sm text-slate-300">{key.projectName || '-'}</td>
                    <td className="py-3 text-sm text-slate-400">
                      {new Date(key.createdAt).toLocaleDateString()}
                    </td>
                    <td className="py-3 text-sm text-slate-400">
                      {key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : 'Never'}
                    </td>
                    <td className="py-3 text-sm">
                      <span
                        className={`px-2 py-1 rounded text-xs font-medium ${
                          key.isActive
                            ? 'bg-green-900/30 text-green-400'
                            : 'bg-red-900/30 text-red-400'
                        }`}
                      >
                        {key.isActive ? 'Active' : 'Inactive'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </Section>
  );
}