whisper-money/resources/js/components/transactions/import-step-mapping.tsx

import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { DateFormat, type ColumnMapping, type ColumnOption, type ParsedRow } from '@/types/import';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { parseDate, parseAmount } from '@/lib/file-parser';

interface ImportStepMappingProps {
    columnOptions: ColumnOption[];
    columnMapping: ColumnMapping;
    dateFormat: DateFormat;
    dateFormatDetected: boolean;
    parsedData: ParsedRow[];
    currencyCode: string;
    onMappingChange: (field: keyof ColumnMapping, value: string) => void;
    onDateFormatChange: (format: DateFormat) => void;
    onNext: () => void;
    onBack: () => void;
}

export function ImportStepMapping({
    columnOptions,
    columnMapping,
    dateFormat,
    dateFormatDetected,
    parsedData,
    currencyCode,
    onMappingChange,
    onDateFormatChange,
    onNext,
    onBack,
}: ImportStepMappingProps) {
    const isValid =
        columnMapping.transaction_date &&
        columnMapping.description &&
        columnMapping.amount;

    const previewTransactions = parsedData.slice(0, 3).map((row) => {
        const date = columnMapping.transaction_date
            ? parseDate(row[columnMapping.transaction_date] as string | number, dateFormat)
            : null;
        const description = columnMapping.description
            ? String(row[columnMapping.description] || '')
            : '';
        const amount = columnMapping.amount
            ? parseAmount(row[columnMapping.amount] as string | number)
            : null;

        return {
            date: date ? date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Invalid date',
            description: description || 'No description',
            amount: amount !== null
                ? new Intl.NumberFormat('en-US', {
                    style: 'currency',
                    currency: currencyCode,
                }).format(amount)
                : 'Invalid amount',
        };
    });

    return (
        <div className="flex flex-col gap-6">
            <div className="space-y-4">
                <div className="space-y-2">
                    <Label htmlFor="date-column">
                        Transaction Date <span className="text-destructive">*</span>
                    </Label>
                    <Select
                        value={columnMapping.transaction_date || ''}
                        onValueChange={(value) =>
                            onMappingChange('transaction_date', value)
                        }
                    >
                        <SelectTrigger id="date-column">
                            <SelectValue placeholder="Select date column" />
                        </SelectTrigger>
                        <SelectContent>
                            {columnOptions.map((option) => (
                                <SelectItem key={option.value} value={option.value}>
                                    <div className="flex flex-col">
                                        <span>{option.label}</span>
                                    </div>
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="space-y-2">
                    <Label htmlFor="description-column">
                        Description <span className="text-destructive">*</span>
                    </Label>
                    <Select
                        value={columnMapping.description || ''}
                        onValueChange={(value) =>
                            onMappingChange('description', value)
                        }
                    >
                        <SelectTrigger id="description-column">
                            <SelectValue placeholder="Select description column" />
                        </SelectTrigger>
                        <SelectContent>
                            {columnOptions.map((option) => (
                                <SelectItem key={option.value} value={option.value}>
                                    <div className="flex flex-col">
                                        <span>{option.label}</span>
                                    </div>
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="space-y-2">
                    <Label htmlFor="amount-column">
                        Amount <span className="text-destructive">*</span>
                    </Label>
                    <Select
                        value={columnMapping.amount || ''}
                        onValueChange={(value) => onMappingChange('amount', value)}
                    >
                        <SelectTrigger id="amount-column">
                            <SelectValue placeholder="Select amount column" />
                        </SelectTrigger>
                        <SelectContent>
                            {columnOptions.map((option) => (
                                <SelectItem key={option.value} value={option.value}>
                                    {option.label}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                {isValid && previewTransactions.length > 0 && (
                    <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
                        <Label className="text-xs opacity-50 pl-2 font-light uppercase tracking-widest">Preview (first 3 rows)</Label>
                        <div className="space-y-2 pt-2">
                            {previewTransactions.map((transaction, index) => (
                                <div key={index} className="flex items-center justify-between rounded-md bg-background p-3 text-sm">
                                    <div className="flex flex-1 items-center gap-3">
                                        <span className="text-muted-foreground">{transaction.date}</span>
                                        <span className="flex-1 truncate">{transaction.description}</span>
                                    </div>
                                    <span className="font-mono font-medium">{transaction.amount}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {!dateFormatDetected && (
                    <div className="space-y-3 rounded-lg border p-4">
                        <Label>Date Format</Label>
                        <RadioGroup
                            value={dateFormat}
                            onValueChange={(value) => onDateFormatChange(value as DateFormat)}
                        >
                            <div className="flex items-center space-x-2">
                                <RadioGroupItem
                                    value={DateFormat.YearMonthDay}
                                    id="format-ymd"
                                />
                                <Label htmlFor="format-ymd" className="cursor-pointer font-normal">
                                    YYYY-MM-DD (e.g., 2024-12-31)
                                </Label>
                            </div>
                            <div className="flex items-center space-x-2">
                                <RadioGroupItem
                                    value={DateFormat.MonthDayYear}
                                    id="format-mdy"
                                />
                                <Label htmlFor="format-mdy" className="cursor-pointer font-normal">
                                    MM-DD-YYYY (e.g., 12-31-2024)
                                </Label>
                            </div>
                            <div className="flex items-center space-x-2">
                                <RadioGroupItem
                                    value={DateFormat.DayMonthYear}
                                    id="format-dmy"
                                />
                                <Label htmlFor="format-dmy" className="cursor-pointer font-normal">
                                    DD-MM-YYYY (e.g., 31-12-2024)
                                </Label>
                            </div>
                        </RadioGroup>
                    </div>
                )}
            </div>

            <div className="flex justify-between">
                <Button variant="outline" onClick={onBack}>
                    Back
                </Button>
                <Button onClick={onNext} disabled={!isValid}>
                    Preview Transactions
                </Button>
            </div>
        </div>
    );
}