'use client'

import { useEffect, useState } from 'react'
import {
  getStockMovements,
  StockMovement,
} from '@/lib/api/agent'
import { Card, CardContent } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Skeleton } from '@/components/ui/Skeleton'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/Select'
import { ArrowUpDown, Filter } from 'lucide-react'

const REASONS = [
  { value: 'all', label: 'All Reasons' },
  { value: 'receipt', label: 'Receipt' },
  { value: 'adjustment', label: 'Adjustment' },
  { value: 'damage', label: 'Damage' },
  { value: 'loss', label: 'Loss' },
  { value: 'transfer', label: 'Transfer' },
  { value: 'sale', label: 'Sale' },
]

const REASON_BADGES: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'default'> = {
  receipt: 'success',
  adjustment: 'info',
  damage: 'danger',
  loss: 'danger',
  transfer: 'default',
  sale: 'success',
}

export default function MovementsPage() {
  const [movements, setMovements] = useState<StockMovement[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)
  const [reasonFilter, setReasonFilter] = useState('all')
  const [offset, setOffset] = useState(0)
  const limit = 30

  useEffect(() => {
    let mounted = true
    async function load() {
      setLoading(true)
      try {
        const res = await getStockMovements({
          reason: reasonFilter === 'all' ? undefined : reasonFilter,
          limit,
          offset,
        })
        if (res.success && mounted) {
          setMovements(res.data.movements)
          setTotal(res.data.total)
        }
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    return () => { mounted = false }
  }, [reasonFilter, offset])

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-96 rounded-xl" />
      </div>
    )
  }

  const totalPages = Math.ceil(total / limit)

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Stock Movements</h1>
        <p className="text-gray-500 dark:text-gray-400">Track all inventory changes and audit trail</p>
      </div>

      {/* Filter */}
      <div className="flex items-center gap-3">
        <Filter className="h-4 w-4 text-gray-400" />
        <label className="text-sm font-medium text-gray-500">Reason:</label>
        <Select value={reasonFilter} onValueChange={(val) => { setReasonFilter(val); setOffset(0) }}>
          <SelectTrigger className="w-48">
            <SelectValue placeholder="All Reasons" />
          </SelectTrigger>
          <SelectContent>
            {REASONS.map(r => (
              <SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <span className="text-sm text-gray-400">{total} total</span>
      </div>

      {/* Table */}
      {movements.length === 0 ? (
        <Card>
          <CardContent className="p-12 text-center">
            <ArrowUpDown className="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600 mb-4" />
            <p className="text-lg font-medium text-gray-500 dark:text-gray-400">No movements recorded</p>
            <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">Stock changes will appear here</p>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200 dark:border-gray-700 text-left text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                  <th className="px-4 py-3">Product</th>
                  <th className="px-4 py-3">Delta</th>
                  <th className="px-4 py-3">Reason</th>
                  <th className="px-4 py-3">Reference</th>
                  <th className="px-4 py-3">Date</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                {movements.map(m => (
                  <tr key={m.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                    <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">
                      {m.product_name || m.product_id.slice(0, 12)}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`font-mono font-semibold ${m.delta > 0 ? 'text-emerald-600' : m.delta < 0 ? 'text-red-600' : 'text-gray-500'}`}>
                        {m.delta > 0 ? '+' : ''}{m.delta}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <Badge variant={REASON_BADGES[m.reason] || 'default'}>{m.reason}</Badge>
                    </td>
                    <td className="px-4 py-3 text-gray-500 dark:text-gray-400 font-mono text-xs">
                      {m.reference_id ? `${m.reference_type || ''}:${m.reference_id.slice(0, 8)}` : '—'}
                    </td>
                    <td className="px-4 py-3 text-gray-500 dark:text-gray-400">
                      {new Date(m.created_at).toLocaleDateString()} {new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {totalPages > 1 && (
            <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700">
              <span className="text-sm text-gray-500">Page {Math.floor(offset / limit) + 1} of {totalPages}</span>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  disabled={offset === 0}
                  onClick={() => setOffset(Math.max(0, offset - limit))}
                >
                  Previous
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  disabled={offset + limit >= total}
                  onClick={() => setOffset(offset + limit)}
                >
                  Next
                </Button>
              </div>
            </div>
          )}
        </Card>
      )}
    </div>
  )
}