'use client'

import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { formatCurrency } from '@/lib/utils'
import type { YearEndPreview } from '@/types'

interface PreviewStepProps {
  preview: YearEndPreview | null
  isLoading: boolean
  error: string | null
  onBack: () => void
  onContinue: () => void
}

export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: PreviewStepProps) {
  if (isLoading) {
    return (
      <div className="space-y-3">
        <Skeleton className="h-6 w-1/3" />
        <Skeleton className="h-32 w-full" />
      </div>
    )
  }

  if (error) {
    return <p className="py-4 text-sm text-destructive">{error}</p>
  }

  if (!preview) return null

  const isProfit = preview.netResult > 0
  const isLoss = preview.netResult < 0

  return (
    <div className="space-y-6">
      <div className="px-1">
        <p className="font-sans text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
          Årets resultat
        </p>
        <div className="mt-1 flex items-baseline justify-between gap-4">
          <p
            className={`font-display text-2xl tabular-nums tracking-tight ${isLoss ? 'text-destructive' : ''}`}
          >
            {formatCurrency(preview.netResult)}
          </p>
          {isProfit && <span className="text-xs text-muted-foreground">Vinst</span>}
          {isLoss && <Badge variant="destructive" className="font-normal">Förlust</Badge>}
        </div>
        <p className="mt-1 text-xs text-muted-foreground">
          Nettoresultat överförs till {preview.closingAccount} {preview.closingAccountName}
        </p>
      </div>

      {preview.bolagsskattMissing && (
        <p className="px-1 text-[12.5px] leading-5 text-attn">
          Året visar vinst men ingen skatt på årets resultat (konto 8910) finns bland de konton
          som stängs. Gå tillbaka till dispositionssteget och boka bolagsskatten innan du
          verkställer, om inte skattemässigt resultat är noll (t.ex. genom underskottsavdrag,
          avsättning till periodiseringsfond eller överavskrivningar).{' '}
          <button type="button" onClick={onBack} className="underline underline-offset-2 hover:opacity-80">
            Till dispositionssteget
          </button>
        </p>
      )}

      {preview.currencyRevaluation && preview.currencyRevaluation.items.length > 0 && (
        <section>
          <div className="mb-1 flex items-center gap-2 px-1">
            <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
              Kursrevaluering (ÅRL 4:13)
            </h3>
            <div className="h-px flex-1 bg-border/60" />
          </div>
          <p className="px-1 text-xs leading-5 text-muted-foreground">
            Öppna fordringar/skulder i utländsk valuta värderas om till balansdagens kurs innan
            bokslut. Detta sker automatiskt som en del av verkställandet.
          </p>
          <div className="px-1 pt-4">
            <div className="grid grid-cols-3 gap-4 text-sm">
              <div>
                <p className="text-muted-foreground text-xs uppercase tracking-wider">Kursvinst</p>
                <p className="font-display text-xl tabular-nums">
                  {formatCurrency(preview.currencyRevaluation.totalGain)}
                </p>
              </div>
              <div>
                <p className="text-muted-foreground text-xs uppercase tracking-wider">Kursförlust</p>
                <p className="font-display text-xl tabular-nums">
                  {formatCurrency(preview.currencyRevaluation.totalLoss)}
                </p>
              </div>
              <div>
                <p className="text-muted-foreground text-xs uppercase tracking-wider">Nettoeffekt</p>
                <p className="font-display text-xl tabular-nums">
                  {formatCurrency(preview.currencyRevaluation.netEffect)}
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      <section>
        <div className="mb-1 flex items-center gap-2 px-1">
          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Bokslutsverifikation: förhandsgranskning
          </h3>
          <div className="h-px flex-1 bg-border/60" />
        </div>
        <p className="px-1 pb-2 text-xs leading-5 text-muted-foreground">
          {preview.closingLines.length} kontorader. Nollställer klass 3-8 mot {preview.closingAccount}.
        </p>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Konto</TableHead>
                <TableHead>Beskrivning</TableHead>
                <TableHead className="text-right">Debet</TableHead>
                <TableHead className="text-right">Kredit</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {preview.closingLines.map((line, i) => (
                <TableRow key={i}>
                  <TableCell className="tabular-nums">{line.account_number}</TableCell>
                  <TableCell className="text-sm">{line.line_description}</TableCell>
                  <TableCell className="text-right tabular-nums">
                    {line.debit_amount > 0 ? formatCurrency(line.debit_amount) : '-'}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {line.credit_amount > 0 ? formatCurrency(line.credit_amount) : '-'}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
      </section>

      <div className="flex justify-between">
        <Button variant="outline" size="sm" onClick={onBack}>
          ← Tillbaka
        </Button>
        <Button variant="outline" size="sm" onClick={onContinue}>
          Nästa: Verkställ →
        </Button>
      </div>
    </div>
  )
}