'use client';

import { useEffect, useState } from 'react';
import { configService, type FeatureFlagInfo } from '@/services/config.service';
import { usePriorityData } from '@/hooks/usePriorityData';
import { TableSkeleton } from '@/components/priority/skeletons';
import { RefreshCw, Search, ToggleLeft, ToggleRight, Plus, Settings2, Filter } from 'lucide-react';

export default function SuperAdminFeatureFlagsPage() {
  const [search, setSearch] = useState('');
  const [toggling, setToggling] = useState<string | null>(null);
  const [categoryFilter, setCategoryFilter] = useState('');

  const { data: flags = [], loading, error, refetch } = usePriorityData<FeatureFlagInfo[]>({
    key: `feature-flags:${search}:${categoryFilter}`,
    fetcher: () => configService.getFeatureFlags({ search: search || undefined, page: 1, limit: 200 }),
    priority: 'high',
    ttl: 30_000,
  });

  const handleToggle = async (flag: FeatureFlagInfo) => {
    setToggling(flag.id);
    try {
      await configService.toggleFeatureFlag(flag.id, !flag.enabled);
      refetch();
    } catch (err: any) {
      console.error(err);
    } finally {
      setToggling(null);
    }
  };

  const categories = Array.from(new Set((flags || []).map((f) => f.category).filter(Boolean)));

  const filteredFlags = (flags || []).filter((f) => {
    if (categoryFilter && f.category !== categoryFilter) return false;
    if (!search) return true;
    const q = search.toLowerCase();
    return f.name.toLowerCase().includes(q) || f.key.toLowerCase().includes(q) || (f.description || '').toLowerCase().includes(q);
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Feature Flags</h1>
          <p className="text-sm text-slate-400">Enable or disable platform features in real time.</p>
        </div>
        <button
          onClick={() => refetch()}
          className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-400 hover:bg-white/5"
        >
          <RefreshCw className="h-4 w-4" /> Refresh
        </button>
      </div>

      {error && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error.message || 'Failed to load feature flags'}</div>
      )}

      <div className="flex flex-wrap items-center gap-4">
        <div className="relative flex-1 min-w-[200px] max-w-md">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <input
            type="text"
            placeholder="Search feature flags..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-sm text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
          />
        </div>
        {categories.length > 0 && (
          <div className="flex items-center gap-2">
            <Filter className="h-4 w-4 text-slate-500" />
            <select
              value={categoryFilter}
              onChange={(e) => setCategoryFilter(e.target.value)}
              className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="">All Categories</option>
              {categories.map((cat) => (
                <option key={cat} value={cat}>
                  {cat}
                </option>
              ))}
            </select>
          </div>
        )}
      </div>

      {loading ? (
        <TableSkeleton rows={8} />
      ) : (
        <div className="overflow-x-auto rounded-xl border border-white/10">
          <table className="w-full text-left text-sm">
            <thead className="bg-white/5 text-xs uppercase text-slate-400">
              <tr>
                <th className="px-4 py-3">Name</th>
                <th className="px-4 py-3">Key</th>
                <th className="px-4 py-3">Category</th>
                <th className="px-4 py-3">Status</th>
                <th className="px-4 py-3">Enabled</th>
                <th className="px-4 py-3">Updated</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5">
              {filteredFlags.map((flag) => (
                <tr key={flag.id} className="hover:bg-white/5">
                  <td className="px-4 py-3 text-white">
                    <div className="flex items-center gap-2">
                      <Settings2 className="h-4 w-4 text-slate-500" />
                      <div>
                        <p className="font-medium">{flag.name}</p>
                        {flag.description && <p className="text-xs text-slate-500">{flag.description}</p>}
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-3 font-mono text-xs text-slate-300">{flag.key}</td>
                  <td className="px-4 py-3 text-slate-300">{flag.category || '-'}</td>
                  <td className="px-4 py-3">
                    <span
                      className={`rounded-full px-2 py-1 text-xs ${
                        flag.status === 'ACTIVE'
                          ? 'bg-emerald-500/10 text-emerald-400'
                          : flag.status === 'ARCHIVED'
                            ? 'bg-slate-500/10 text-slate-400'
                            : 'bg-amber-500/10 text-amber-400'
                      }`}
                    >
                      {flag.status}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => handleToggle(flag)}
                      disabled={toggling === flag.id}
                      className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-50 ${
                        flag.enabled
                          ? 'bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
                          : 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
                      }`}
                    >
                      {flag.enabled ? <ToggleRight className="h-4 w-4" /> : <ToggleLeft className="h-4 w-4" />}
                      {flag.enabled ? 'Enabled' : 'Disabled'}
                    </button>
                  </td>
                  <td className="px-4 py-3 text-slate-400">
                    {flag.lastChangedAt ? new Date(flag.lastChangedAt).toLocaleString() : '-'}
                  </td>
                </tr>
              ))}
              {filteredFlags.length === 0 && (
                <tr>
                  <td colSpan={6} className="px-4 py-8 text-center text-slate-400">
                    No feature flags found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}