import { User } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useLanguage } from '@/contexts/language-context';
import {
    formatEmployeeJoiningDateNumericOrDash,
    formatMoneyAmountOrDash,
    formatSalaryMonth,
} from '@/lib/dates';
import { cn } from '@/lib/utils';

function DetailRow({ label, value, valueClassName }) {
    return (
        <div className="flex flex-col gap-1 border-b border-border/60 py-3 last:border-0 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
            <dt className="text-muted-foreground shrink-0 text-sm">{label}</dt>
            <dd className={valueClassName ?? 'text-end text-sm font-medium'}>{value}</dd>
        </div>
    );
}

/**
 * @param {object} props
 * @param {string} props.status
 * @param {Record<string, string>} props.labels
 * @param {boolean} [props.isActive]
 * @param {string} [props.paidAmount]
 * @param {string} [props.unpaidAmount]
 * @param {'en'|'fa'} [props.locale]
 */
export function AdvanceSettlementStatus({
    status,
    labels,
    isActive = true,
    paidAmount,
    unpaidAmount,
    locale = 'fa',
}) {
    return (
        <div className="space-y-1.5">
            <SettlementBadge status={status} labels={labels} />
            {isActive ? (
                <div className="space-y-0.5 text-xs tabular-nums">
                    <p>
                        <span className="text-muted-foreground">{labels.paidAmount}: </span>
                        <span className="font-medium text-emerald-700 dark:text-emerald-400">
                            {formatMoneyAmountOrDash(paidAmount, locale)}
                        </span>
                    </p>
                    <p>
                        <span className="text-muted-foreground">{labels.remainAmount}: </span>
                        <span className="font-medium text-destructive">
                            {formatMoneyAmountOrDash(unpaidAmount, locale)}
                        </span>
                    </p>
                </div>
            ) : null}
        </div>
    );
}

/**
 * @param {object} props
 * @param {string} props.status
 * @param {Record<string, string>} props.labels
 */
function SettlementBadge({ status, labels }) {
    const variant =
        status === 'paid'
            ? 'secondary'
            : status === 'partial'
              ? 'outline'
              : status === 'unpaid'
                ? 'destructive'
                : 'secondary';

    const labelKey = {
        paid: 'settlementPaid',
        partial: 'settlementPartial',
        unpaid: 'settlementUnpaid',
        inactive: 'settlementInactive',
    }[status];

    return (
        <Badge
            variant={variant}
            className={cn(
                status === 'partial' && 'border-amber-500/50 text-amber-700 dark:text-amber-400',
                status === 'paid' && 'bg-emerald-600/10 text-emerald-700 dark:text-emerald-400',
            )}
        >
            {labels[labelKey] ?? status}
        </Badge>
    );
}

/**
 * @param {object} props
 * @param {boolean} props.open
 * @param {(open: boolean) => void} props.onOpenChange
 * @param {object | null} props.record
 * @param {Record<string, string>} props.labels
 * @param {'en'|'fa'} props.locale
 */
export function PermanentEmployeeAdvanceDetailDialog({ open, onOpenChange, record, labels, locale }) {
    const { direction } = useLanguage();

    if (!record) {
        return null;
    }

    function formatType(type) {
        return type === 'product' ? labels.typeProduct : labels.typeCash;
    }

    function itemModeLabel(mode) {
        return mode === 'pack' ? labels.byPack : labels.byKg;
    }

    const items = Array.isArray(record.items) ? record.items : [];
    const transactions = Array.isArray(record.transactions)
        ? record.transactions
        : Array.isArray(record.deduction_history)
          ? record.deduction_history
          : [];

    const totalAdvanceAmount = record.total_advance_amount ?? record.amount;
    const totalDeducted = record.total_deducted ?? record.paid_amount;
    const remainingBalance = record.remaining_balance ?? record.unpaid_amount;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent dir={direction} className="gap-0 overflow-hidden p-0 sm:max-w-2xl">
                <DialogHeader className="space-y-3 border-b border-border bg-muted/40 px-6 py-5 text-start">
                    <div className="flex items-start gap-3">
                        <div className="bg-background flex size-10 shrink-0 items-center justify-center rounded-full border">
                            <User className="text-muted-foreground size-5" />
                        </div>
                        <div className="min-w-0 flex-1 space-y-1">
                            <DialogTitle className="text-start text-lg leading-snug">
                                {record.employee_name}
                            </DialogTitle>
                            {record.employee_designation ? (
                                <p className="text-muted-foreground text-sm">
                                    {record.employee_designation}
                                </p>
                            ) : null}
                            <DialogDescription className="text-start text-sm">
                                {labels.viewDetailsSubtitle}
                            </DialogDescription>
                        </div>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        <SettlementBadge status={record.settlement_status} labels={labels} />
                        <Badge variant="outline" className="font-normal">
                            {formatType(record.type)}
                        </Badge>
                        {!record.is_active ? (
                            <Badge variant="secondary">{labels.statusInactive}</Badge>
                        ) : null}
                    </div>
                </DialogHeader>

                <div className="max-h-[min(75vh,40rem)] overflow-y-auto px-6 py-4">
                    <div className="mb-4 grid gap-3 sm:grid-cols-3">
                        <div className="rounded-lg border bg-muted/20 px-3 py-3">
                            <p className="text-muted-foreground text-xs">{labels.summaryTotalAdvance}</p>
                            <p className="mt-1 text-base font-semibold tabular-nums">
                                {formatMoneyAmountOrDash(totalAdvanceAmount, locale)}
                            </p>
                        </div>
                        <div className="rounded-lg border bg-muted/20 px-3 py-3">
                            <p className="text-muted-foreground text-xs">{labels.summaryTotalDeducted}</p>
                            <p className="mt-1 text-base font-semibold tabular-nums text-emerald-700 dark:text-emerald-400">
                                {formatMoneyAmountOrDash(totalDeducted, locale)}
                            </p>
                        </div>
                        <div className="rounded-lg border bg-muted/20 px-3 py-3">
                            <p className="text-muted-foreground text-xs">{labels.summaryRemainingBalance}</p>
                            <p className="mt-1 text-base font-semibold tabular-nums text-destructive">
                                {formatMoneyAmountOrDash(remainingBalance, locale)}
                            </p>
                        </div>
                    </div>

                    <dl className="mb-2">
                        <DetailRow
                            label={labels.advanceDate}
                            value={formatEmployeeJoiningDateNumericOrDash(record.advance_date, locale)}
                        />
                        <DetailRow
                            label={labels.colOverallAdvances}
                            value={
                                <span className="font-medium tabular-nums">
                                    {formatMoneyAmountOrDash(record.overall_advance_balance, locale)}
                                </span>
                            }
                        />
                        <DetailRow
                            label={labels.recordedBy}
                            value={record.created_by_name ?? labels.notProvided}
                        />
                        <DetailRow
                            label={labels.recordedAt}
                            value={record.created_at ?? labels.notProvided}
                        />
                    </dl>

                    <div className="border-t py-4">
                        <h3 className="mb-3 text-sm font-semibold">{labels.advanceItemsTitle}</h3>
                        <div className="overflow-x-auto rounded-md border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>{labels.colItem}</TableHead>
                                        <TableHead>{labels.quantityBy}</TableHead>
                                        <TableHead className="text-end">{labels.packQuantity}</TableHead>
                                        <TableHead className="text-end">{labels.totalWeight}</TableHead>
                                        <TableHead className="text-end">{labels.lineTotal}</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {items.length === 0 ? (
                                        <TableRow>
                                            <TableCell
                                                colSpan={5}
                                                className="text-muted-foreground h-16 text-center text-sm"
                                            >
                                                {labels.noAdvanceItems}
                                            </TableCell>
                                        </TableRow>
                                    ) : (
                                        items.map((item, index) => (
                                            <TableRow key={`${item.type}-${index}`}>
                                                <TableCell className="whitespace-normal">
                                                    <div className="font-medium">
                                                        {item.type === 'cash'
                                                            ? labels.typeCash
                                                            : (item.product_name ?? item.label)}
                                                    </div>
                                                    {item.notes ? (
                                                        <div className="text-muted-foreground text-xs">
                                                            {item.notes}
                                                        </div>
                                                    ) : null}
                                                </TableCell>
                                                <TableCell>
                                                    {item.type === 'product' && item.quantity_mode
                                                        ? itemModeLabel(item.quantity_mode)
                                                        : '—'}
                                                </TableCell>
                                                <TableCell className="text-end tabular-nums">
                                                    {item.quantity ?? '—'}
                                                </TableCell>
                                                <TableCell className="text-end tabular-nums">
                                                    {item.total_weight ?? '—'}
                                                </TableCell>
                                                <TableCell className="text-end font-medium tabular-nums">
                                                    {formatMoneyAmountOrDash(item.line_total, locale)}
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    </div>

                    <div className="border-t py-4">
                        <h3 className="mb-3 text-sm font-semibold">{labels.advanceTransactionsTitle}</h3>
                        {transactions.length > 0 ? (
                            <>
                                <div className="overflow-x-auto rounded-md border">
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>{labels.deductionMonth}</TableHead>
                                                <TableHead className="text-end">
                                                    {labels.deductionAmount}
                                                </TableHead>
                                                <TableHead>{labels.deductionSalaryStatus}</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {transactions.map((entry, index) => (
                                                <TableRow
                                                    key={`${entry.salary_month}-${entry.amount ?? entry.advance_deduction}-${index}`}
                                                >
                                                    <TableCell className="whitespace-nowrap text-sm">
                                                        {entry.salary_month_label
                                                            ?? formatSalaryMonth(entry.salary_month, locale)
                                                            ?? entry.salary_month}
                                                    </TableCell>
                                                    <TableCell className="text-end tabular-nums">
                                                        {formatMoneyAmountOrDash(
                                                            entry.amount ?? entry.advance_deduction,
                                                            locale,
                                                        )}
                                                    </TableCell>
                                                    <TableCell>
                                                        <Badge variant="outline" className="font-normal">
                                                            {entry.status === 'paid'
                                                                ? labels.salaryStatusPaid
                                                                : labels.salaryStatusDraft}
                                                        </Badge>
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </div>
                                <p className="text-muted-foreground mt-2 text-xs">
                                    {labels.deductionHistoryHint}
                                </p>
                            </>
                        ) : (
                            <p className="text-muted-foreground text-sm">
                                {record.is_active
                                    ? labels.noTransactionsYet
                                    : labels.noDeductionsYet}
                            </p>
                        )}
                    </div>
                </div>

                <DialogFooter className="border-t border-border bg-muted/20 px-6 py-4">
                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                        {labels.close}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

export { SettlementBadge };