import { Head, Link } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowLeft, Edit, Calendar, Hash, AlignLeft } from "lucide-react";
import { formatDate, formatCurrency } from '@/utils/helpers';

interface JournalEntryItem {
    id: number;
    account_id: number;
    description: string;
    debit_amount: string;
    credit_amount: string;
    account: {
        account_code: string;
        account_name: string;
    };
}

interface JournalEntry {
    id: number;
    journal_number: string;
    journal_date: string;
    description: string;
    total_debit: string;
    total_credit: string;
    items: JournalEntryItem[];
}

interface ManualJournalsShowProps {
    journal: JournalEntry;
    auth: any;
}

export default function Show({ journal, auth }: ManualJournalsShowProps) {
    const { t } = useTranslation();

    const breadcrumbs = [
        { label: t('Accounting'), url: route('account.index') },
        { label: t('Manual Journals'), url: route('account.manual-journals.index') },
        { label: t('View') }
    ];

    return (
        <AuthenticatedLayout
            breadcrumbs={breadcrumbs}
            pageTitle={t('View Manual Journal') + ' - ' + journal.journal_number}
            backUrl={route('account.manual-journals.index')}
            pageActions={
                auth?.user?.permissions?.includes('manage-account') && (
                    <Button asChild>
                        <Link href={route('account.manual-journals.edit', journal.id)}>
                            <Edit className="mr-2 h-4 w-4" /> {t('Edit Journal')}
                        </Link>
                    </Button>
                )
            }
        >
            <div className="space-y-6">
                <Card>
                    <CardHeader className="pb-4">
                        <CardTitle>{t('Journal Details')}</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div className="flex items-start gap-3">
                                <div className="p-2 bg-primary/10 rounded-lg text-primary">
                                    <Hash className="w-5 h-5" />
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-muted-foreground">{t('Journal Number')}</p>
                                    <p className="font-semibold">{journal.journal_number}</p>
                                </div>
                            </div>
                            
                            <div className="flex items-start gap-3">
                                <div className="p-2 bg-primary/10 rounded-lg text-primary">
                                    <Calendar className="w-5 h-5" />
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-muted-foreground">{t('Date')}</p>
                                    <p className="font-semibold">{formatDate(journal.journal_date)}</p>
                                </div>
                            </div>

                            <div className="flex items-start gap-3 lg:col-span-1 md:col-span-2">
                                <div className="p-2 bg-primary/10 rounded-lg text-primary">
                                    <AlignLeft className="w-5 h-5" />
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-muted-foreground">{t('Description')}</p>
                                    <p className="font-semibold">{journal.description || '-'}</p>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="pb-4 border-b">
                        <CardTitle>{t('Journal Items')}</CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                        <div className="w-full overflow-auto">
                            <table className="w-full text-sm text-left">
                                <thead className="bg-muted/50 text-muted-foreground border-b">
                                    <tr>
                                        <th className="px-4 py-3 font-medium">{t('Account')}</th>
                                        <th className="px-4 py-3 font-medium">{t('Description')}</th>
                                        <th className="px-4 py-3 font-medium text-right">{t('Debit')}</th>
                                        <th className="px-4 py-3 font-medium text-right">{t('Credit')}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {journal.items.map((item) => (
                                        <tr key={item.id} className="border-b last:border-b-0 hover:bg-muted/50">
                                            <td className="px-4 py-3 font-medium">
                                                {item.account?.account_code} - {item.account?.account_name}
                                            </td>
                                            <td className="px-4 py-3 text-muted-foreground">
                                                {item.description || '-'}
                                            </td>
                                            <td className="px-4 py-3 text-right">
                                                {parseFloat(item.debit_amount) > 0 ? formatCurrency(item.debit_amount) : '-'}
                                            </td>
                                            <td className="px-4 py-3 text-right">
                                                {parseFloat(item.credit_amount) > 0 ? formatCurrency(item.credit_amount) : '-'}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                                <tfoot className="bg-muted/50 border-t">
                                    <tr>
                                        <td colSpan={2} className="px-4 py-3 font-medium text-right">
                                            {t('Total')}:
                                        </td>
                                        <td className="px-4 py-3 font-bold text-lg text-right">
                                            {formatCurrency(journal.total_debit)}
                                        </td>
                                        <td className="px-4 py-3 font-bold text-lg text-right">
                                            {formatCurrency(journal.total_credit)}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AuthenticatedLayout>
    );
}
