'use client'

import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'

import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { PageHeader } from '@/components/ui/page-header'
import { EmptyState } from '@/components/ui/empty-state'
import { Skeleton } from '@/components/ui/skeleton'
import { Package, Pencil, Plus } from 'lucide-react'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { formatCurrency, formatDate } from '@/lib/utils'
import type { Asset, AssetCategory } from '@/types'
import { CreateAssetDialog } from '@/components/bookkeeping/assets/CreateAssetDialog'
import { EditAssetDialog } from '@/components/bookkeeping/assets/EditAssetDialog'

/** GET /api/assets annotates each row with whether depreciation has posted. */
type AssetRow = Asset & { has_posted_depreciation?: boolean }

const CATEGORY_LABEL_KEYS: Record<AssetCategory, string> = {
  immaterial: 'category_immaterial',
  building: 'category_building',
  land_improvement: 'category_land_improvement',
  machinery: 'category_machinery',
  equipment: 'category_equipment',
  vehicle: 'category_vehicle',
  computer: 'category_computer',
  other_tangible: 'category_other_tangible',
}

export default function AssetsPage() {
  const t = useTranslations('assets')
  const [assets, setAssets] = useState<AssetRow[] | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editing, setEditing] = useState<AssetRow | null>(null)

  const [reloadKey, setReloadKey] = useState(0)

  useEffect(() => {
    let cancelled = false
    fetch('/api/assets')
      .then(async (res) => {
        if (cancelled) return
        if (!res.ok) {
          setError(t('load_failed'))
          return
        }
        const { data } = (await res.json()) as { data: AssetRow[] }
        if (cancelled) return
        setError(null)
        setAssets(data)
      })
      .catch(() => {
        if (!cancelled) setError(t('load_failed'))
      })
    return () => {
      cancelled = true
    }
  }, [reloadKey, t])

  const handleCreated = useCallback(() => {
    setDialogOpen(false)
    setReloadKey((k) => k + 1)
  }, [])

  const handleSaved = useCallback(() => {
    setEditing(null)
    setReloadKey((k) => k + 1)
  }, [])

  return (
    <div className="space-y-8">
      <PageHeader
        title={t('title')}
        action={
          <Button onClick={() => setDialogOpen(true)}>
            <Plus className="mr-1 h-4 w-4" /> {t('new_asset')}
          </Button>
        }
      />

      {assets === null && !error && (
        <Card>
          <CardContent className="p-6 space-y-2">
            <Skeleton className="h-6 w-1/3" />
            <Skeleton className="h-4 w-full" />
          </CardContent>
        </Card>
      )}

      {error && (
        <Card>
          <CardContent className="p-6 text-destructive">{error}</CardContent>
        </Card>
      )}

      {assets !== null && assets.length === 0 && (
        <EmptyState
          icon={Package}
          title={t('empty_title')}
          description={t('empty_description')}
          actionLabel={t('new_asset')}
          onAction={() => setDialogOpen(true)}
        />
      )}

      {assets !== null && assets.length > 0 && (
        <Card>
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t('th_name')}</TableHead>
                  <TableHead>{t('th_category')}</TableHead>
                  <TableHead>{t('th_acquired')}</TableHead>
                  <TableHead className="text-right">{t('th_acquisition_cost')}</TableHead>
                  <TableHead>{t('th_useful_life')}</TableHead>
                  <TableHead>{t('th_status')}</TableHead>
                  <TableHead className="text-right">{t('th_actions')}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {assets.map((asset) => {
                  const years = Math.round(asset.useful_life_months / 12)
                  return (
                    <TableRow key={asset.id}>
                      <TableCell className="font-medium">{asset.name}</TableCell>
                      <TableCell className="text-sm">{t(CATEGORY_LABEL_KEYS[asset.category])}</TableCell>
                      <TableCell className="tabular-nums">
                        {formatDate(asset.acquisition_date)}
                      </TableCell>
                      <TableCell className="text-right tabular-nums">
                        {formatCurrency(Number(asset.acquisition_cost))}
                      </TableCell>
                      <TableCell className="text-sm">
                        {t('useful_life_format', { years, months: asset.useful_life_months })}
                      </TableCell>
                      <TableCell>
                        {asset.disposed_at ? (
                          <div className="flex flex-col gap-1">
                            <Badge variant="secondary">{t('status_disposed')}</Badge>
                            <span className="text-xs text-muted-foreground tabular-nums">
                              {formatDate(asset.disposed_at)}
                            </span>
                          </div>
                        ) : (
                          <Badge variant="success">{t('status_active')}</Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        {!asset.disposed_at && (
                          <div className="flex items-center justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setEditing(asset)}
                            >
                              <Pencil className="mr-1 h-4 w-4" />
                              {t('action_edit')}
                            </Button>
                            <Link href={`/assets/${asset.id}/dispose`}>
                              <Button variant="ghost" size="sm">
                                {t('action_dispose')}
                              </Button>
                            </Link>
                          </div>
                        )}
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}

      <CreateAssetDialog open={dialogOpen} onOpenChange={setDialogOpen} onCreated={handleCreated} />

      {editing && (
        <EditAssetDialog
          key={editing.id}
          asset={editing}
          open={editing !== null}
          onOpenChange={(open) => {
            if (!open) setEditing(null)
          }}
          onSaved={handleSaved}
        />
      )}
    </div>
  )
}