import { Badge } from '@ui/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@ui/components/ui/card';
import { Separator } from '@ui/components/ui/separator';
import {
    Building2,
    User as UserIcon,
    Wallet,
    FileText,
    Calendar,
    CreditCard,
    CheckCircle2,
    Clock,
    XCircle,
} from 'lucide-react';
import { useAppText } from '@/lib/app-text';
import type { User } from '@/types';
import type { FundRequest, Company, Bank } from '@/types/fund-request';
import { ApprovalSection } from './ApprovalSection';
import { AttachmentList } from './AttachmentList';

interface FundRequestDetailViewProps {
    fundRequest: FundRequest;
    companies: Company[];
    employees: User[];
    banks: Bank[];
    permissions?: {
        canApproveCostControl?: boolean;
        canApproveTaxOfficer?: boolean;
        canApproveSpvFinance?: boolean;
        canApproveManagerFinance?: boolean;
        canUploadPayment?: boolean;
        canUploadReport?: boolean;
    };
}

const getStatusConfig = (status: string, text: any) => {
    const configs: Record<string, { color: string; bgColor: string; icon: any; label: string }> = {
        waiting: {
            color: 'text-yellow-700 dark:text-yellow-300',
            bgColor: 'bg-yellow-100 dark:bg-yellow-500/15',
            icon: Clock,
            label: text('fund_request.status_waiting_approval'),
        },
        approved: {
            color: 'text-green-700 dark:text-green-300',
            bgColor: 'bg-green-100 dark:bg-green-500/15',
            icon: CheckCircle2,
            label: text('fund_request.status_approved'),
        },
        rejected: {
            color: 'text-red-700 dark:text-red-300',
            bgColor: 'bg-red-100 dark:bg-red-500/15',
            icon: XCircle,
            label: text('fund_request.status_rejected'),
        },
        on_progress: {
            color: 'text-blue-700 dark:text-blue-300',
            bgColor: 'bg-blue-100 dark:bg-blue-500/15',
            icon: Clock,
            label: text('fund_request.status_on_progress'),
        },
        done: {
            color: 'text-green-700 dark:text-green-300',
            bgColor: 'bg-green-200 dark:bg-green-500/20',
            icon: CheckCircle2,
            label: text('fund_request.status_done'),
        },
    };

    return configs[status] || configs.waiting;
};

const StatusTimeline = ({ status }: { status: string }) => {
    const { t: text } = useAppText();
    const steps = [
        { key: 'waiting', label: text('fund_request.status_waiting_approval'), icon: Clock },
        { key: 'approved', label: text('fund_request.status_approved'), icon: CheckCircle2 },
        { key: 'on_progress', label: text('fund_request.status_on_progress'), icon: Clock },
        { key: 'done', label: text('fund_request.status_done'), icon: CheckCircle2 },
    ];

    const statusOrder = ['waiting', 'approved', 'on_progress', 'done'];
    const currentIndex = statusOrder.indexOf(status);
    const isRejected = status === 'rejected';

    return (
        <div className="space-y-3">
            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{text('fund_request.detail_progress')}</h3>
            <div className="relative">
                {steps.map((step, index) => {
                    const Icon = step.icon;
                    const isCompleted = index <= currentIndex && !isRejected;
                    const isCurrent = index === currentIndex && !isRejected;
                    const isLast = index === steps.length - 1;

                    return (
                        <div key={step.key} className="relative flex items-start pb-6 last:pb-0">
                            {/* Vertical Line */}
                            {!isLast && (
                                <div
                                    className={`absolute left-4 top-8 w-0.5 h-full ${isCompleted ? 'bg-green-500' : 'bg-muted'
                                        }`}
                                />
                            )}

                            {/* Icon Circle */}
                            <div
                                className={`relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 ${isCompleted
                                    ? 'border-green-500 bg-green-500 text-white'
                                    : isCurrent
                                        ? 'border-blue-500 bg-blue-50 text-blue-500 dark:bg-blue-500/10 dark:text-blue-300'
                                        : 'border-muted bg-background text-muted-foreground'
                                    }`}
                            >
                                <Icon className="h-4 w-4" />
                            </div>

                            {/* Label */}
                            <div className="ml-4 flex-1">
                                <p
                                    className={`text-xs font-medium md:text-sm ${isCompleted || isCurrent ? 'text-foreground' : 'text-muted-foreground'
                                        }`}
                                >
                                    {step.label}
                                </p>
                            </div>
                        </div>
                    );
                })}

                {/* Rejected Status */}
                {isRejected && (
                    <div className="relative flex items-start">
                        <div className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-red-500 bg-red-500 text-white">
                            <XCircle className="h-4 w-4" />
                        </div>
                        <div className="ml-4 flex-1">
                            <p className="text-sm font-medium text-red-600 dark:text-red-300">{text('fund_request.status_rejected')}</p>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export function FundRequestDetailView({
    fundRequest,
    permissions = {},
}: FundRequestDetailViewProps) {
    const { t: text } = useAppText();
    const status = fundRequest.status ?? 'waiting';
    const statusConfig = getStatusConfig(status, text);
    const StatusIcon = statusConfig.icon;

    return (
        <div className="space-y-4 pb-4 md:space-y-5 md:pb-5">
            {/* Status Card */}
            <Card>
                <CardHeader className="px-4 py-3 md:px-5 md:py-4">
                    <div className="flex items-center justify-between">
                        <div>
                            <CardTitle className="text-base md:text-lg">{text('fund_request.field_status')}</CardTitle>
                            <CardDescription className="text-xs md:text-sm">{text('fund_request.detail_current_status')}</CardDescription>
                        </div>
                        <Badge
                            variant="outline"
                            className={`${statusConfig.bgColor} ${statusConfig.color} border-0 flex items-center gap-1.5 px-2.5 py-1 text-xs md:text-sm`}
                        >
                            <StatusIcon className="h-4 w-4" />
                            {statusConfig.label}
                        </Badge>
                    </div>
                </CardHeader>
                <CardContent className="px-4 pb-4 pt-0 md:px-5 md:pb-5">
                    <StatusTimeline status={status} />
                </CardContent>
            </Card>

            {/* Request Details */}
            <Card>
                <CardHeader className="px-4 py-3 md:px-5 md:py-4">
                    <CardTitle className="text-base md:text-lg">{text('fund_request.detail_information')}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 px-4 pb-4 pt-0 md:space-y-4 md:px-5 md:pb-5">
                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4">
                        {/* Request ID */}
                        <div className="flex items-start gap-3">
                            <div className="mt-0.5">
                                <FileText className="h-5 w-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1">
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.detail_request_id')}</p>
                                <p className="font-mono text-sm font-medium md:text-base">
                                    FR-{String(fundRequest.id).padStart(5, '0')}
                                </p>
                            </div>
                        </div>

                        {/* Submitted Date */}
                        <div className="flex items-start gap-3">
                            <div className="mt-0.5">
                                <Calendar className="h-5 w-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1">
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.detail_submitted_on')}</p>
                                <p className="text-sm font-medium md:text-base">
                                    {new Date(fundRequest.created_at).toLocaleDateString('id-ID', {
                                        day: '2-digit',
                                        month: 'long',
                                        year: 'numeric',
                                    })}
                                </p>
                                <p className="text-xs text-muted-foreground md:text-sm">
                                    {new Date(fundRequest.created_at).toLocaleTimeString('id-ID', {
                                        hour: '2-digit',
                                        minute: '2-digit',
                                    })}
                                </p>
                            </div>
                        </div>

                        {/* Company */}
                        <div className="flex items-start gap-3">
                            <div className="mt-0.5">
                                <Building2 className="h-5 w-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1">
                                <p className="text-xs text-muted-foreground md:text-sm">{text('budget.field_company')}</p>
                                <p className="text-sm font-medium md:text-base">{fundRequest.company?.name || '-'}</p>
                            </div>
                        </div>

                        {/* Applicant */}
                        <div className="flex items-start gap-3">
                            <div className="mt-0.5">
                                <UserIcon className="h-5 w-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1">
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.field_requester')}</p>
                                <p className="text-sm font-medium md:text-base">{fundRequest.applicant?.name || '-'}</p>
                            </div>
                        </div>
                    </div>

                    <Separator />

                    {/* Description */}
                    <div className="space-y-1.5">
                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{text('fund_request.field_description')}</p>
                        <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                            {fundRequest.description}
                        </p>
                    </div>

                    {fundRequest.invoice_number && (
                        <>
                            <Separator />
                            <div className="space-y-1.5">
                                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{text('fund_request.field_invoice_number')}</p>
                                <p className="text-sm font-mono">{fundRequest.invoice_number}</p>
                            </div>
                        </>
                    )}
                </CardContent>
            </Card>

            {/* Financial Details */}
            <Card>
                <CardHeader className="px-4 py-3 md:px-5 md:py-4">
                    <CardTitle className="text-base md:text-lg">{text('fund_request.detail_financial_information')}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 px-4 pb-4 pt-0 md:space-y-4 md:px-5 md:pb-5">
                    {/* Amount */}
                    <div className="flex items-start gap-3">
                        <div className="mt-0.5">
                            <Wallet className="h-5 w-5 text-muted-foreground" />
                        </div>
                        <div className="flex-1">
                            <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.field_amount')}</p>
                            <p className="text-xl font-bold text-green-600 dark:text-green-400 md:text-2xl">
                                {new Intl.NumberFormat('id-ID', {
                                    style: 'currency',
                                    currency: 'IDR',
                                    minimumFractionDigits: 0,
                                }).format(fundRequest.amount)}
                            </p>
                        </div>
                    </div>

                    <Separator />

                    {/* Bank Account Info */}
                    <div className="space-y-2.5">
                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{text('fund_request.detail_bank_account')}</p>

                        <div className="flex items-start gap-3">
                            <div className="mt-0.5">
                                <CreditCard className="h-5 w-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1">
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.field_bank')}</p>
                                <p className="text-sm font-medium md:text-base">{fundRequest.bank?.name || '-'}</p>
                            </div>
                        </div>

                        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4">
                            <div>
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.field_account_name')}</p>
                                <p className="text-sm font-medium md:text-base">{fundRequest.account_name}</p>
                            </div>
                            <div>
                                <p className="text-xs text-muted-foreground md:text-sm">{text('fund_request.field_account_number')}</p>
                                <p className="font-mono text-sm font-medium md:text-base">{fundRequest.account_number}</p>
                            </div>
                        </div>
                    </div>
                </CardContent>
            </Card>

            {/* Approval Sections */}
            <div className="space-y-3">
                <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground md:text-base">{text('fund_request.detail_approval_process')}</h2>

                {/* Cost Control Approval */}
                <ApprovalSection
                    title={text('fund_request.approval_cost_control')}
                    level="cost_control"
                    status={(fundRequest.cost_control_status as 'approved' | 'rejected' | null | undefined) ?? null}
                    approvedByName={fundRequest.cost_control_approver?.name}
                    approvedAt={fundRequest.cost_control_approved_at ?? null}
                    canApprove={permissions.canApproveCostControl || false}
                    fundRequestId={fundRequest.id}
                />

                {/* Tax Officer Approval */}
                <ApprovalSection
                    title={text('fund_request.approval_tax_officer')}
                    level="tax_officer"
                    status={(fundRequest.tax_officer_status as 'approved' | 'rejected' | null | undefined) ?? null}
                    approvedByName={fundRequest.tax_officer_approver?.name}
                    approvedAt={fundRequest.tax_officer_approved_at ?? null}
                    canApprove={permissions.canApproveTaxOfficer || false}
                    disabled={fundRequest.cost_control_status !== 'approved'}
                    fundRequestId={fundRequest.id}
                    requiresTaxAmount={true}
                />

                {/* SPV Finance Approval */}
                <ApprovalSection
                    title={text('fund_request.approval_spv_finance')}
                    level="spv_finance"
                    status={(fundRequest.spv_finance_status as 'approved' | 'rejected' | null | undefined) ?? null}
                    approvedByName={fundRequest.spv_finance_approver?.name}
                    approvedAt={fundRequest.spv_finance_approved_at ?? null}
                    canApprove={permissions.canApproveSpvFinance || false}
                    disabled={fundRequest.tax_officer_status !== 'approved'}
                    fundRequestId={fundRequest.id}
                />

                {/* Manager Finance Approval */}
                <ApprovalSection
                    title={text('fund_request.approval_manager_finance')}
                    level="manager_finance"
                    status={(fundRequest.manager_finance_status as 'approved' | 'rejected' | null | undefined) ?? null}
                    approvedByName={fundRequest.manager_finance_approver?.name}
                    approvedAt={fundRequest.manager_finance_approved_at ?? null}
                    canApprove={permissions.canApproveManagerFinance || false}
                    disabled={fundRequest.spv_finance_status !== 'approved'}
                    fundRequestId={fundRequest.id}
                />
            </div>


            {/* Attachments */}
            <Card>
                <CardHeader className="px-4 py-3 md:px-5 md:py-4">
                    <CardTitle className="text-base md:text-lg">{text('fund_request.detail_supporting_documents')}</CardTitle>
                    <CardDescription className="text-xs md:text-sm">
                        {text('fund_request.detail_supporting_documents_desc')}
                    </CardDescription>
                </CardHeader>
                <CardContent className="px-4 pb-4 pt-0 md:px-5 md:pb-5">
                    <AttachmentList attachments={fundRequest.attachments} />
                </CardContent>
            </Card>
        </div>
    );
}