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

import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Gauge } from 'lucide-react'
import { DataTable, PageHeader, 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 { PlanLimitConfig, AccountOverrideResponse, AccountOverrideCreate } from '@/types/admin'

export function PlanLimitsPage() {
  const [plans, setPlans] = useState<PlanLimitConfig[]>([])
  const [overrides, setOverrides] = useState<AccountOverrideResponse[]>([])
  const [loading, setLoading] = useState(true)
  const [editPlan, setEditPlan] = useState<PlanLimitConfig | null>(null)
  const [createOverride, setCreateOverride] = useState(false)
  const [overrideForm, setOverrideForm] = useState<AccountOverrideCreate>({
    account_display_code: '',
    override_max_trees: null,
    override_max_sessions_per_month: null,
    override_max_users: null,
    note: null,
  })

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const [planData, overrideData] = await Promise.all([
        adminApi.listPlanLimits(),
        adminApi.listAccountOverrides(),
      ])
      setPlans(planData)
      setOverrides(overrideData)
    } catch {
      toast.error('Failed to load plan configuration')
    } finally {
      setLoading(false)
    }
  }, [])

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

  const handleSavePlan = async () => {
    if (!editPlan) return
    try {
      await adminApi.updatePlanLimits(editPlan)
      toast.success('Plan limits updated')
      setEditPlan(null)
      fetchData()
    } catch {
      toast.error('Failed to update plan limits')
    }
  }

  const handleCreateOverride = async () => {
    try {
      await adminApi.createAccountOverride(overrideForm)
      toast.success('Override created')
      setCreateOverride(false)
      setOverrideForm({ account_display_code: '', override_max_trees: null, override_max_sessions_per_month: null, override_max_users: null, note: null })
      fetchData()
    } catch {
      toast.error('Failed to create override')
    }
  }

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

  const planColumns: Column<PlanLimitConfig>[] = [
    { key: 'plan', header: 'Plan', render: (p) => <span className="font-medium text-white capitalize">{p.plan}</span> },
    { key: 'max_trees', header: 'Max Trees', render: (p) => <span className="text-sm text-white/40">{p.max_trees ?? 'Unlimited'}</span> },
    { key: 'max_sessions', header: 'Sessions/Month', render: (p) => <span className="text-sm text-white/40">{p.max_sessions_per_month ?? 'Unlimited'}</span> },
    { key: 'max_users', header: 'Max Users', render: (p) => <span className="text-sm text-white/40">{p.max_users ?? 'Unlimited'}</span> },
    {
      key: 'actions', header: '', className: 'w-12',
      render: (p) => (
        <button
          onClick={() => setEditPlan({ ...p })}
          className="rounded-md px-3 py-1 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
        >
          Edit
        </button>
      ),
    },
  ]

  const overrideColumns: Column<AccountOverrideResponse>[] = [
    { 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: 'max_trees', header: 'Max Trees', render: (o) => <span className="text-sm text-white/40">{o.override_max_trees ?? '-'}</span> },
    { key: 'max_sessions', header: 'Sessions/Month', render: (o) => <span className="text-sm text-white/40">{o.override_max_sessions_per_month ?? '-'}</span> },
    { key: 'max_users', header: 'Max Users', render: (o) => <span className="text-sm text-white/40">{o.override_max_users ?? '-'}</span> },
    { 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="Plan Limits" description="Configure plan tier limits and account-specific overrides" />

      <div>
        <h2 className="text-lg font-semibold text-white">Plan Defaults</h2>
        <div className="mt-3">
          <DataTable columns={planColumns} data={plans} keyExtractor={(p) => p.plan} isLoading={loading} />
        </div>
      </div>

      <div>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Account Overrides</h2>
          <button
            onClick={() => setCreateOverride(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={<Gauge className="h-12 w-12" />} title="No overrides" description="Account-specific limit overrides will appear here." />}
          />
        </div>
      </div>

      {/* Edit Plan Modal */}
      <Modal
        isOpen={!!editPlan}
        onClose={() => setEditPlan(null)}
        title={`Edit ${editPlan?.plan} Plan`}
        size="sm"
        footer={
          <div className="flex justify-end gap-3">
            <button onClick={() => setEditPlan(null)} 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={handleSavePlan} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90">Save</button>
          </div>
        }
      >
        {editPlan && (
          <div className="space-y-4">
            <div>
              <label className="mb-1 block text-sm font-medium text-white">Max Trees (empty = unlimited)</label>
              <input type="number" value={editPlan.max_trees ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-white">Max Sessions/Month (empty = unlimited)</label>
              <input type="number" value={editPlan.max_sessions_per_month ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-white">Max Users (empty = unlimited)</label>
              <input type="number" value={editPlan.max_users ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
            </div>
          </div>
        )}
      </Modal>

      {/* Create Override Modal */}
      <Modal
        isOpen={createOverride}
        onClose={() => setCreateOverride(false)}
        title="Create Account Override"
        size="sm"
        footer={
          <div className="flex justify-end gap-3">
            <button onClick={() => setCreateOverride(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} 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">Max Trees Override</label>
            <input type="number" value={overrideForm.override_max_trees ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Max Sessions/Month Override</label>
            <input type="number" value={overrideForm.override_max_sessions_per_month ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-white">Max Users Override</label>
            <input type="number" value={overrideForm.override_max_users ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
          </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 for override" className={inputCn} />
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default PlanLimitsPage