'use client'
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import axios from 'axios'
import { toast } from 'sonner'
import { Package, Plus, Edit } from 'lucide-react'
import { Card, Badge, Button, Modal, Input, Textarea, PageHeader, Toggle } from '@/components/ui/components'

export default function ExpenseCategoriesPage() {
  const qc = useQueryClient()
  const [modal, setModal] = useState(false)
  const [editing, setEditing] = useState<any>(null)
  const [form, setForm] = useState({ name:'', code:'', description:'', requiresApproval: false, approvalThreshold:'', glAccountCode:'' })

  const { data, isLoading } = useQuery({ queryKey:['expense-cats'], queryFn:()=>axios.get('/api/expenses/categories').then(r=>r.data.data) })

  const saveMutation = useMutation({
    mutationFn: (p: any) => editing?.id ? axios.patch(`/api/expenses/categories/${editing.id}`, p) : axios.post('/api/expenses/categories', p),
    onSuccess: () => { toast.success('Category saved'); qc.invalidateQueries({queryKey:['expense-cats']}); setModal(false) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed'),
  })

  function openNew() { setEditing(null); setForm({ name:'', code:'', description:'', requiresApproval: false, approvalThreshold:'', glAccountCode:'' }); setModal(true) }
  function openEdit(c: any) { setEditing(c); setForm({...c, approvalThreshold: String(c.approvalThreshold||'')}); setModal(true) }

  const categories = data ?? []

  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">
      <PageHeader title="Expense Categories" description={`${categories.length} categories`} icon={<Package className="w-6 h-6"/>}
        actions={<Button size="sm" icon={<Plus className="w-4 h-4"/>} onClick={openNew}>Add Category</Button>}
      />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {isLoading ? Array.from({length:6}).map((_,i)=><div key={i} className="h-32 bg-muted/30 rounded-xl animate-pulse"/>) : categories.map((c: any) => (
          <Card key={c.id}>
            <div className="p-4">
              <div className="flex justify-between items-start mb-2">
                <div><h3 className="font-semibold">{c.name}</h3><p className="text-xs text-muted-foreground font-mono">{c.code} · GL: {c.glAccountCode}</p></div>
                <Badge variant={c.isActive ? 'success' : 'default'}>{c.isActive ? 'Active' : 'Inactive'}</Badge>
              </div>
              {c.description && <p className="text-sm text-muted-foreground mb-2">{c.description}</p>}
              {c.requiresApproval && <p className="text-xs text-amber-600">⚠ Requires approval above KES {parseFloat(c.approvalThreshold||0).toLocaleString()}</p>}
              <Button size="xs" variant="outline" className="mt-2" icon={<Edit className="w-3 h-3"/>} onClick={() => openEdit(c)}>Edit</Button>
            </div>
          </Card>
        ))}
      </div>
      <Modal open={modal} onClose={() => setModal(false)} title={editing?.id ? 'Edit Category' : 'New Category'}
        footer={<><Button variant="outline" size="sm" onClick={() => setModal(false)}>Cancel</Button><Button size="sm" loading={saveMutation.isPending} onClick={() => saveMutation.mutate({...form, approvalThreshold: form.approvalThreshold ? parseFloat(form.approvalThreshold) : null})}>Save</Button></>}
      >
        <div className="space-y-4">
          <Input label="Category Name" required value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="Office Supplies"/>
          <Input label="Category Code" required value={form.code} onChange={e=>setForm(f=>({...f,code:e.target.value}))} placeholder="OFF-SUP"/>
          <Input label="GL Account Code" value={form.glAccountCode} onChange={e=>setForm(f=>({...f,glAccountCode:e.target.value}))} hint="Maps to chart of accounts" placeholder="5100"/>
          <Textarea label="Description" rows={2} value={form.description} onChange={e=>setForm(f=>({...f,description:e.target.value}))}/>
          <Toggle label="Requires Approval Above Threshold" checked={form.requiresApproval} onChange={v=>setForm(f=>({...f,requiresApproval:v}))}/>
          {form.requiresApproval && <Input label="Approval Threshold (KES)" type="number" value={form.approvalThreshold} onChange={e=>setForm(f=>({...f,approvalThreshold:e.target.value}))} placeholder="5000"/>}
        </div>
      </Modal>
    </div>
  )
}