resolutionflow/frontend/src/pages/admin/FeatureFlagsPage.tsx

import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, ToggleLeft } from 'lucide-react'
import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
import { adminApi } from '@/api/admin'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import type { FeatureFlagResponse, FeatureFlagCreate, AccountFeatureOverrideResponse, AccountFeatureOverrideCreate } from '@/types/admin'

const PLANS = ['free', 'pro', 'team']

export function FeatureFlagsPage() {
  const [flags, setFlags] = useState<FeatureFlagResponse[]>([])
  const [overrides, setOverrides] = useState<AccountFeatureOverrideResponse[]>([])
  const [loading, setLoading] = useState(true)
  const [createOpen, setCreateOpen] = useState(false)
  const [createForm, setCreateForm] = useState<FeatureFlagCreate>({ flag_key: '', display_name: '', description: '' })
  const [overrideOpen, setOverrideOpen] = useState(false)
  const [overrideForm, setOverrideForm] = useState<AccountFeatureOverrideCreate>({ account_display_code: '', flag_id: '', enabled: true, note: '' })

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const [flagData, overrideData] = await Promise.all([
        adminApi.listFeatureFlags(),
        adminApi.listFeatureFlagOverrides(),
      ])
      setFlags(flagData)
      setOverrides(overrideData)
    } catch {
      toast.error('Failed to load feature flags')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchData() }, [fetchData])

  const handleCreate = async () => {
    try {
      await adminApi.createFeatureFlag(createForm)
      toast.success('Feature flag created')
      setCreateOpen(false)
      setCreateForm({ flag_key: '', display_name: '', description: '' })
      fetchData()
    } catch {
      toast.error('Failed to create feature flag')
    }
  }

  const handleTogglePlan = async (flagId: string, plan: string, currentEnabled: boolean) => {
    try {
      await adminApi.updatePlanDefault({ plan, flag_id: flagId, enabled: !currentEnabled })
      toast.success('Plan default updated')
      fetchData()
    } catch {
      toast.error('Failed to update plan default')
    }
  }

  const handleDeleteFlag = async (id: string) => {
    try {
      await adminApi.deleteFeatureFlag(id)
      toast.success('Feature flag deleted')
      fetchData()
    } catch {
      toast.error('Failed to delete feature flag')
    }
  }

  const handleCreateOverride = async () => {
    try {
      await adminApi.createFeatureFlagOverride(overrideForm)
      toast.success('Override created')
      setOverrideOpen(false)
      fetchData()
    } catch {
      toast.error('Failed to create override')
    }
  }

  const handleDeleteOverride = async (id: string) => {
    try {
      await adminApi.deleteFeatureFlagOverride(id)
      toast.success('Override deleted')
      fetchData()
    } catch {
      toast.error('Failed to delete override')
    }
  }

  const flagColumns: Column<FeatureFlagResponse>[] = [
    { key: 'name', header: 'Name', render: (f) => (
      <div>
        <div className="font-medium text-white">{f.display_name}</div>
        <div className="text-xs text-white/40">{f.flag_key}</div>
      </div>
    )},
    { key: 'description', header: 'Description', render: (f) => <span className="text-sm text-white/40">{f.description || '-'}</span> },
    ...PLANS.map(plan => ({
      key: plan,
      header: plan.charAt(0).toUpperCase() + plan.slice(1),
      render: (f: FeatureFlagResponse) => {
        const entry = f.plan_defaults.find(d => d.plan === plan)
        const enabled = entry?.enabled ?? false
        return (
          <button
            onClick={() => handleTogglePlan(f.id, plan, enabled)}
            className={cn(
              'h-6 w-10 rounded-full transition-colors',
              enabled ? 'bg-emerald-400' : 'bg-white/10'
            )}
          >
            <div className={cn(
              'h-4 w-4 rounded-full bg-white transition-transform',
              enabled ? 'translate-x-5' : 'translate-x-1'
            )} />
          </button>
        )
      },
    })),
    {
      key: 'actions', header: '', className: 'w-12',
      render: (f) => (
        <ActionMenu items={[
          { label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => handleDeleteFlag(f.id), destructive: true },
        ]} />
      ),
    },
  ]

  const overrideColumns: Column<AccountFeatureOverrideResponse>[] = [
    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-white">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
    { key: 'flag', header: 'Flag', render: (o) => <span className="text-sm text-white/40">{o.flag_display_name || o.flag_key || o.flag_id.slice(0, 8)}</span> },
    { key: 'enabled', header: 'Enabled', render: (o) => <StatusBadge variant={o.enabled ? 'success' : 'destructive'}>{o.enabled ? 'Yes' : 'No'}</StatusBadge> },
    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-white/40">{o.note || '-'}</span> },
    {
      key: 'actions', header: '', className: 'w-12',
      render: (o) => (
        <ActionMenu items={[
          { label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => handleDeleteOverride(o.id), destructive: true },
        ]} />
      ),
    },
  ]

  const inputCn = cn('w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20')

  return (
    <div className="space-y-8">
      <PageHeader
        title="Feature Flags"
        description="Manage feature availability per plan and account"
        action={
          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
            <Plus className="h-4 w-4" />
            Create Flag
          </button>
        }
      />

      <div>
        <h2 className="text-lg font-semibold text-white">Feature Matrix</h2>
        <div className="mt-3">
          <DataTable columns={flagColumns} data={flags} keyExtractor={(f) => f.id} isLoading={loading}
            emptyState={<EmptyState icon={<ToggleLeft className="h-12 w-12" />} title="No feature flags" description="Create feature flags to control availability per plan." />}
          />
        </div>
      </div>

      <div>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Account Overrides</h2>
          <button onClick={() => setOverrideOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
            <Plus className="h-4 w-4" />
            Add Override
          </button>
        </div>
        <div className="mt-3">
          <DataTable columns={overrideColumns} data={overrides} keyExtractor={(o) => o.id} isLoading={loading}
            emptyState={<EmptyState icon={<ToggleLeft className="h-12 w-12" />} title="No overrides" description="Account-specific feature overrides will appear here." />}
          />
        </div>
      </div>

      {/* Create Flag Modal */}
      <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Feature Flag" size="sm"
        footer={
          <div className="flex justify-end gap-3">
            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
            <button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
          </div>
        }
      >
        <div className="space-y-4">
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Flag Key</label>
            <input type="text" value={createForm.flag_key} onChange={(e) => setCreateForm({ ...createForm, flag_key: e.target.value })} placeholder="e.g. custom_branding" className={inputCn} />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Display Name</label>
            <input type="text" value={createForm.display_name} onChange={(e) => setCreateForm({ ...createForm, display_name: e.target.value })} placeholder="e.g. Custom Branding" className={inputCn} />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Description</label>
            <input type="text" value={createForm.description ?? ''} onChange={(e) => setCreateForm({ ...createForm, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
          </div>
        </div>
      </Modal>

      {/* Create Override Modal */}
      <Modal isOpen={overrideOpen} onClose={() => setOverrideOpen(false)} title="Add Account Override" size="sm"
        footer={
          <div className="flex justify-end gap-3">
            <button onClick={() => setOverrideOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
          </div>
        }
      >
        <div className="space-y-4">
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
            <input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" className={inputCn} />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Feature Flag</label>
            <select value={overrideForm.flag_id} onChange={(e) => setOverrideForm({ ...overrideForm, flag_id: e.target.value })} className={inputCn}>
              <option value="">Select a flag...</option>
              {flags.map(f => <option key={f.id} value={f.id}>{f.display_name}</option>)}
            </select>
          </div>
          <div className="flex items-center gap-2">
            <input type="checkbox" id="override-enabled" checked={overrideForm.enabled} onChange={(e) => setOverrideForm({ ...overrideForm, enabled: e.target.checked })} className="h-4 w-4 rounded border-white/10" />
            <label htmlFor="override-enabled" className="text-sm font-medium text-white">Enabled</label>
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Note</label>
            <input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason" className={inputCn} />
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default FeatureFlagsPage