import { Banknote, Pencil, 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 { useLanguage } from '@/contexts/language-context';
import {
    formatMoneyAmountOrDash,
    formatPunishmentDatesForSalary,
    formatSalaryMonth,
} from '@/lib/dates';
import { salaryBeforeAfterIncrement } from '@/lib/permanent-salary-increment';

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 tabular-nums'}>
                {value}
            </dd>
        </div>
    );
}

/**
 * @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
 * @param {(row: object) => void} [props.onEdit]
 * @param {(row: object) => void} [props.onPay]
 */
export function PermanentSalaryViewDialog({
    open,
    onOpenChange,
    record,
    labels,
    locale,
    onEdit,
    onPay,
}) {
    const { direction } = useLanguage();

    if (!record) {
        return null;
    }

    const salaryMonthLabel =
        formatSalaryMonth(record.salary_month, locale) ?? record.salary_month ?? labels.notProvided;
    const incrementSalaries = salaryBeforeAfterIncrement(record);

    function openEdit() {
        onOpenChange(false);
        onEdit?.(record);
    }

    function openPay() {
        const scrollY = window.scrollY;
        const row = record;

        onOpenChange(false);
        requestAnimationFrame(() => {
            onPay?.(row);
            requestAnimationFrame(() => {
                window.scrollTo({ top: scrollY, left: 0, behavior: 'instant' });
            });
        });
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent
                dir={direction}
                className="gap-0 overflow-hidden p-0 sm:max-w-lg"
                onCloseAutoFocus={(event) => event.preventDefault()}
            >
                <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.staff_name}
                            </DialogTitle>
                            {record.designation_name ? (
                                <p className="text-muted-foreground text-sm">{record.designation_name}</p>
                            ) : null}
                            <DialogDescription className="text-start text-sm">
                                {labels.viewSubtitle}
                            </DialogDescription>
                        </div>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {record.is_draft ? (
                            <Badge variant="outline">{labels.statusDraft}</Badge>
                        ) : (
                            <Badge variant="secondary">{labels.statusPaid}</Badge>
                        )}
                        <Badge variant="outline" className="font-normal">
                            {salaryMonthLabel}
                        </Badge>
                    </div>
                </DialogHeader>

                <dl className="max-h-[min(60vh,28rem)] overflow-y-auto px-6 py-2">
                    <DetailRow
                        label={labels.contractSalary}
                        value={formatMoneyAmountOrDash(record.contract_salary, locale)}
                    />
                    <DetailRow
                        label={labels.baseSalary}
                        value={
                            <span>
                                {formatMoneyAmountOrDash(record.base_salary, locale)}
                                {record.is_prorated ? (
                                    <span className="text-muted-foreground mt-0.5 block text-xs font-normal">
                                        {labels.proratedBaseHint
                                            .replace('{employed}', String(record.employed_days ?? 0))
                                            .replace('{total}', String(record.days_in_month ?? 0))}
                                    </span>
                                ) : null}
                            </span>
                        }
                    />
                    <DetailRow
                        label={labels.allowance}
                        value={formatMoneyAmountOrDash(record.allowance, locale)}
                    />
                    {incrementSalaries ? (
                        <>
                            <DetailRow
                                label={labels.oldSalary}
                                value={formatMoneyAmountOrDash(incrementSalaries.before, locale)}
                            />
                            <DetailRow
                                label={labels.newSalary}
                                value={formatMoneyAmountOrDash(incrementSalaries.after, locale)}
                                valueClassName="text-end text-sm font-semibold tabular-nums text-emerald-700 dark:text-emerald-400"
                            />
                        </>
                    ) : null}
                    <DetailRow label={labels.absentDays} value={String(record.absent_days ?? 0)} />
                    <DetailRow
                        label={labels.absentDeduction}
                        value={
                            record.deduct_absent_days ? (
                                <span className="text-destructive">
                                    −{formatMoneyAmountOrDash(record.absent_deduction, locale)}
                                </span>
                            ) : (
                                labels.notDeducted
                            )
                        }
                    />
                    <DetailRow
                        label={labels.punishmentDeduction}
                        value={
                            Number(record.punishment_total) > 0 ? (
                                <span className="text-destructive">
                                    −{formatMoneyAmountOrDash(record.punishment_total, locale)}
                                </span>
                            ) : (
                                labels.notDeducted
                            )
                        }
                    />
                    {Number(record.punishment_total) > 0 ? (
                        <DetailRow
                            label={labels.punishmentTime}
                            value={formatPunishmentDatesForSalary(record.punishment_dates, locale)}
                            valueClassName="text-end text-sm"
                        />
                    ) : null}
                    <DetailRow
                        label={labels.outstandingAdvanceBalance}
                        value={formatMoneyAmountOrDash(
                            record.outstanding_advance_balance ?? 0,
                            locale,
                        )}
                    />
                    <DetailRow
                        label={labels.advanceDeduction}
                        value={
                            Number(record.advance_deduction ?? record.advance_total) > 0 ? (
                                <span className="text-destructive">
                                    −{formatMoneyAmountOrDash(
                                        record.advance_deduction ?? record.advance_total,
                                        locale,
                                    )}
                                </span>
                            ) : (
                                labels.notDeducted
                            )
                        }
                    />
                    <DetailRow
                        label={labels.totalSalary}
                        value={formatMoneyAmountOrDash(record.amount, locale)}
                        valueClassName="text-end text-base font-semibold tabular-nums"
                    />
                    {record.is_paid ? (
                        <>
                            <DetailRow
                                label={labels.paymentMethod}
                                value={
                                    record.was_paid_with_fingerprint
                                        ? labels.paidViaFingerprint
                                        : labels.paidManually
                                }
                            />
                            <DetailRow
                                label={labels.paidAt}
                                value={record.paid_at ?? labels.notProvided}
                                valueClassName="text-end text-sm whitespace-nowrap"
                            />
                            <DetailRow
                                label={labels.paidBy}
                                value={record.paid_by_name ?? labels.notProvided}
                                valueClassName="text-end text-sm"
                            />
                        </>
                    ) : null}
                </dl>

                <DialogFooter className="flex-col gap-2 border-t border-border bg-muted/20 px-6 py-4 sm:flex-row sm:justify-end">
                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                        {labels.close}
                    </Button>
                    {record.is_draft && onEdit ? (
                        <Button type="button" variant="outline" onClick={openEdit}>
                            <Pencil className="size-4" />
                            {labels.editSalary}
                        </Button>
                    ) : null}
                    {record.is_draft && onPay ? (
                        <Button type="button" onClick={openPay}>
                            <Banknote className="size-4" />
                            {labels.paySalary}
                        </Button>
                    ) : null}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}