import { useHttp } from '@inertiajs/react';
import {
    PlusCircle,
    CalendarClock,
    CalendarRange,
    Flag,
    ListChecks,
    MessageSquareText,
    ShieldCheck,
    UserMinus,
    UserPlus,
    Activity,
    Clock,
    AlertCircle,
    ListTodo,
    TrendingUp,
    Users,
} from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import { DataPagination } from '@/components/DataPagination';
import { TaskDetailSheet } from '@/components/tasks/TaskDetailSheet';
import { Spinner } from '@/components/ui/spinner';
import {
    PROJECT_PROGRESS_STATUS_FALLBACK,
    PROJECT_PROGRESS_STATUS_MAP,
} from '@/lib/status-config';
import { mapApiTasksToTaskoTasks } from '@/lib/task-mappers';
import { formatDate } from '@/lib/utils';
import type { ProjectInfoData, ProjectTaskSummary } from '@/types/project';
import type { Project, Task } from '@/types/task';
import type { ApiTask } from '@/types/task-api';

const MINUTES_PER_WEEK = 7 * 24 * 60;

const RELATIVE_TIME_FORMATTER = new Intl.RelativeTimeFormat('en', {
    numeric: 'auto',
    style: 'narrow',
});

/** Unit terbesar dulu; pasangan [unit, jumlah menit per unit]. */
const RELATIVE_TIME_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
    ['day', 60 * 24],
    ['hour', 60],
];

interface ProjectInfoProps {
    project: ProjectInfoData;
    // Konteks yang dibutuhkan untuk membuka detail task dari activity log:
    // - `taskProject`: objek Project untuk mapper API → Task frontend.
    // - `divisionId` & `projectMembers`: diteruskan ke TaskDetailSheet.
    taskProject: Project;
    divisionId?: string;
    projectMembers?: { id: string; name: string; role?: string }[];
    // Ringkasan metrik task (dihitung di server) untuk kartu Overall Progress
    // & Quick Metrics di tab Info.
    taskSummary: ProjectTaskSummary;
    memberCount: number;
}

export function ProjectInfo({
    project,
    taskProject,
    divisionId,
    projectMembers = [],
    taskSummary,
    memberCount,
}: ProjectInfoProps) {
    const { submit: submitGenericHttp } = useHttp();

    // Detail task yang sedang dibuka dari activity log. Ditampilkan sebagai
    // sheet mengambang di atas tab Info (read-only) tanpa pindah ke tab Tasks.
    const [viewingTask, setViewingTask] = useState<Task | null>(null);
    const [isViewingTaskOpen, setIsViewingTaskOpen] = useState(false);
    const [loadingTaskId, setLoadingTaskId] = useState<number | null>(null);

    // Ambil task lengkap dari server lalu buka sheet detailnya. Task diambil
    // langsung by id (bukan dari daftar tab Tasks) agar bisa dibuka meski
    // sedang tidak dimuat di halaman/filter yang aktif.
    const openTaskDetail = async (taskId: number) => {
        setLoadingTaskId(taskId);

        try {
            const response = await submitGenericHttp({
                url: `/tasks/${taskId}`,
                method: 'get',
            });

            // TaskResource dibungkus sebagai { data: {...} }. Namun sebagian
            // helper HTTP meng-unwrap-nya, jadi kita terima kedua bentuk.
            const payload = response as { data?: ApiTask } & Partial<ApiTask>;
            const apiTask: ApiTask | undefined =
                payload?.data ??
                (payload?.id ? (payload as ApiTask) : undefined);

            if (!apiTask) {
                throw new Error('Task not found');
            }

            const [mapped] = mapApiTasksToTaskoTasks([apiTask], {
                assigneeSource: 'project',
                dateFallback: 'empty-string',
                project: taskProject,
                timestampSource: 'empty-string',
            });

            setViewingTask(mapped);
            setIsViewingTaskOpen(true);
        } catch (err) {
            console.error('Failed to load task details:', err);
            toast.error('Failed to open task details', {
                description:
                    'The task may have been deleted, or you do not have access.',
            });
        } finally {
            setLoadingTaskId(null);
        }
    };

    const formatActivityTime = (dateString: string) => {
        const diffMin = Math.round(
            (new Date(dateString).getTime() - Date.now()) / 60000,
        );

        if (-diffMin < 1) {
            return 'Just now';
        }

        // Di atas seminggu, waktu relatif ("3w ago") lebih sulit dibaca
        // daripada tanggalnya langsung.
        if (-diffMin >= MINUTES_PER_WEEK) {
            return formatDate(dateString, {
                month: 'short',
                year: false,
                withTime: true,
            });
        }

        const [unit, perUnit] = RELATIVE_TIME_UNITS.find(
            ([, minutes]) => -diffMin >= minutes,
        ) ?? ['minute', 1];

        // trunc, bukan round: 23 jam 59 menit harus jadi "23h ago",
        // bukan "24h ago".
        return RELATIVE_TIME_FORMATTER.format(
            Math.trunc(diffMin / perUnit),
            unit,
        );
    };

    const getActivityConfig = (type: string) => {
        switch (type) {
            case 'project_status_updated':
                return {
                    icon: <Flag className="h-4 w-4 text-sky-500" />,
                    bgColor:
                        'bg-sky-50 dark:bg-sky-950/30 border-sky-100 dark:border-sky-900/50',
                };
            case 'task_created':
                return {
                    icon: <PlusCircle className="h-4 w-4 text-emerald-500" />,
                    bgColor:
                        'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-100 dark:border-emerald-900/50',
                };
            case 'task_status_updated':
                return {
                    icon: <ListChecks className="h-4 w-4 text-indigo-500" />,
                    bgColor:
                        'bg-indigo-50 dark:bg-indigo-950/30 border-indigo-100 dark:border-indigo-900/50',
                };
            case 'task_due_date_updated':
                return {
                    icon: <CalendarClock className="h-4 w-4 text-amber-500" />,
                    bgColor:
                        'bg-amber-50 dark:bg-amber-950/30 border-amber-100 dark:border-amber-900/50',
                };
            case 'comment_added':
                return {
                    icon: (
                        <MessageSquareText className="h-4 w-4 text-teal-500" />
                    ),
                    bgColor:
                        'bg-teal-50 dark:bg-teal-950/30 border-teal-100 dark:border-teal-900/50',
                };
            case 'member_joined':
                return {
                    icon: <UserPlus className="h-4 w-4 text-violet-500" />,
                    bgColor:
                        'bg-violet-50 dark:bg-violet-950/30 border-violet-100 dark:border-violet-900/50',
                };
            case 'member_role_updated':
                return {
                    icon: <ShieldCheck className="h-4 w-4 text-blue-500" />,
                    bgColor:
                        'bg-blue-50 dark:bg-blue-950/30 border-blue-100 dark:border-blue-900/50',
                };
            case 'member_removed':
                return {
                    icon: <UserMinus className="h-4 w-4 text-rose-500" />,
                    bgColor:
                        'bg-rose-50 dark:bg-rose-950/30 border-rose-100 dark:border-rose-900/50',
                };
            default:
                return {
                    icon: (
                        <Activity className="h-4 w-4 text-muted-foreground" />
                    ),
                    bgColor: 'bg-muted border-border',
                };
        }
    };

    const activitiesPaginated = project.activities;
    const activities = activitiesPaginated?.data || [];

    const statusKey = (project.progressStatus || '').toLowerCase();
    const statusConfig = PROJECT_PROGRESS_STATUS_MAP[statusKey] ?? {
        ...PROJECT_PROGRESS_STATUS_FALLBACK,
        label: project.progressStatus || '-',
    };

    return (
        <div className="space-y-6">
            {/* Project Metadata + Summary Section (satu card) */}
            <section className="rounded-xl border bg-card p-6 shadow-xs">
                <h2 className="mb-6 text-lg font-bold">Project Information</h2>
                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <div className="space-y-1.5">
                        <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                            Deadline
                        </span>
                        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                            <CalendarRange className="h-4 w-4 text-muted-foreground" />
                            {formatDate(project.deadline, { month: 'long' })}
                        </div>
                    </div>
                    <div className="space-y-1.5">
                        <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                            Project Status
                        </span>
                        <div className="flex items-center gap-2">
                            <div
                                className={`h-2 w-2 animate-pulse rounded-full ${statusConfig.dot}`}
                            />
                            <span
                                className={`text-sm font-semibold ${statusConfig.color}`}
                            >
                                {statusConfig.label}
                            </span>
                        </div>
                    </div>
                    {project.overviews && (
                        <div className="mt-2 space-y-1.5 border-t pt-4 md:col-span-2">
                            <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                                Overview
                            </span>
                            <p className="text-sm leading-relaxed whitespace-pre-line text-muted-foreground">
                                {project.overviews}
                            </p>
                        </div>
                    )}
                </div>

                {/* Overall Progress & Quick Metrics */}
                <div className="mt-6 border-t pt-6">
                    <div className="mb-3 flex items-center justify-between">
                        <h3 className="text-xs font-bold tracking-wider text-muted-foreground uppercase">
                            Overall Progress
                        </h3>
                        <span className="flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary">
                            <TrendingUp size={11} />
                            {taskSummary.progress_percentage}%
                        </span>
                    </div>

                    <div className="mb-5">
                        <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
                            <div
                                className="absolute top-0 bottom-0 left-0 bg-primary transition-all duration-500 ease-in-out"
                                style={{
                                    width: `${taskSummary.progress_percentage}%`,
                                }}
                            />
                        </div>
                        <div className="mt-1.5 flex justify-between text-xs text-muted-foreground">
                            <span>{taskSummary.completed} Completed</span>
                            <span>{taskSummary.total} Total</span>
                        </div>
                    </div>

                    <h3 className="mb-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
                        Quick Metrics
                    </h3>

                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                        <div className="rounded-lg border bg-muted/30 p-2.5">
                            <div className="mb-0.5 flex items-center gap-1.5 text-muted-foreground">
                                <Clock size={12} />
                                <span className="text-xs font-medium">
                                    Active
                                </span>
                            </div>
                            <p className="text-lg font-bold tracking-tight">
                                {taskSummary.in_progress}
                            </p>
                        </div>

                        <div className="rounded-lg border bg-muted/30 p-2.5">
                            <div className="mb-0.5 flex items-center gap-1.5 text-muted-foreground">
                                <ListTodo size={12} />
                                <span className="text-xs font-medium">
                                    Pending
                                </span>
                            </div>
                            <p className="text-lg font-bold tracking-tight">
                                {taskSummary.pending}
                            </p>
                        </div>

                        {taskSummary.overdue > 0 ? (
                            <div className="rounded-lg border border-red-200 bg-red-50/50 p-2.5 dark:border-red-500/20 dark:bg-red-500/5">
                                <div className="mb-0.5 flex items-center gap-1.5 text-red-600 dark:text-red-400">
                                    <AlertCircle size={12} />
                                    <span className="text-xs font-medium">
                                        Overdue
                                    </span>
                                </div>
                                <p className="text-lg font-bold tracking-tight text-red-700 dark:text-red-400">
                                    {taskSummary.overdue}
                                </p>
                            </div>
                        ) : (
                            <div className="rounded-lg border bg-muted/30 p-2.5">
                                <div className="mb-0.5 flex items-center gap-1.5 text-muted-foreground">
                                    <AlertCircle size={12} />
                                    <span className="text-xs font-medium">
                                        High Pri
                                    </span>
                                </div>
                                <p className="text-lg font-bold tracking-tight">
                                    {taskSummary.high_priority}
                                </p>
                            </div>
                        )}

                        <div className="rounded-lg border bg-muted/30 p-2.5">
                            <div className="mb-0.5 flex items-center gap-1.5 text-muted-foreground">
                                <Users size={12} />
                                <span className="text-xs font-medium">
                                    Members
                                </span>
                            </div>
                            <p className="text-lg font-bold tracking-tight">
                                {memberCount}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Project Activities Section */}
            <section className="rounded-xl border bg-card p-6 shadow-xs">
                <div className="mb-6 flex items-center justify-between">
                    <h2 className="flex items-center gap-2 text-lg font-bold">
                        <Activity className="h-4 w-4 text-primary" />
                        Project Activity
                    </h2>
                    <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
                        {activitiesPaginated?.total || 0} activities
                    </span>
                </div>

                {activities.length === 0 ? (
                    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed bg-muted/30 py-10 text-center">
                        <Activity className="mb-2 h-8 w-8 stroke-[1.5] text-muted-foreground/40" />
                        <p className="text-sm font-medium text-muted-foreground">
                            No activity recorded yet
                        </p>
                        <p className="mt-1 text-xs text-muted-foreground/60">
                            Task updates and collaboration are recorded here
                            automatically.
                        </p>
                    </div>
                ) : (
                    <div className="relative space-y-6 pb-2 pl-4 before:absolute before:top-3 before:bottom-3 before:left-5.75 before:w-0.5 before:bg-muted">
                        {activities.map((activity) => {
                            const config = getActivityConfig(
                                activity.activity_type,
                            );

                            // Activity yang menyimpan task_id bisa diklik untuk
                            // membuka detail task terkait langsung di tab Info.
                            const taskId = activity.properties?.task_id;
                            const isClickable = typeof taskId === 'number';
                            const isLoading =
                                isClickable && loadingTaskId === taskId;

                            // Activity tanpa task terkait tidak bisa diklik, jadi
                            // dirender sebagai <div> biasa agar tidak masuk
                            // urutan fokus keyboard.
                            const Wrapper = isClickable ? 'button' : 'div';

                            return (
                                <Wrapper
                                    key={activity.id}
                                    type={isClickable ? 'button' : undefined}
                                    disabled={isLoading || undefined}
                                    aria-busy={isLoading || undefined}
                                    onClick={
                                        isClickable
                                            ? () => openTaskDetail(taskId)
                                            : undefined
                                    }
                                    className={`group relative flex w-full gap-4 rounded-lg text-left transition-colors ${
                                        isClickable
                                            ? 'cursor-pointer hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:outline-none'
                                            : ''
                                    } ${isLoading ? 'opacity-60' : ''}`}
                                >
                                    {/* Timeline Indicator */}
                                    <div
                                        className={`relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-background ${config.bgColor} shadow-sm transition-transform duration-200 group-hover:scale-110`}
                                    >
                                        {isLoading ? (
                                            <Spinner className="text-muted-foreground" />
                                        ) : (
                                            config.icon
                                        )}
                                    </div>

                                    {/* Activity Content */}
                                    <div className="flex-1 pt-1.5">
                                        <div className="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                                            <p className="text-sm leading-snug font-medium text-foreground">
                                                <span className="font-semibold text-primary">
                                                    @{activity.user.name}
                                                </span>
                                                <span className="font-normal text-muted-foreground">
                                                    {' '}
                                                </span>
                                                {activity.description}
                                            </p>
                                            <time
                                                dateTime={activity.created_at}
                                                title={formatDate(
                                                    activity.created_at,
                                                    {
                                                        month: 'long',
                                                        withTime: true,
                                                    },
                                                )}
                                                className="flex shrink-0 items-center gap-1 text-[11px] font-medium whitespace-nowrap text-muted-foreground"
                                            >
                                                <Clock className="h-3 w-3" />
                                                {formatActivityTime(
                                                    activity.created_at,
                                                )}
                                            </time>
                                        </div>

                                        {/* Dynamic Meta Badges/Chips if needed based on metadata */}
                                        {activity.properties &&
                                            (activity.properties.task_code ||
                                                activity.properties.role) && (
                                                <div className="mt-1.5 flex flex-wrap gap-1.5">
                                                    {activity.properties
                                                        .task_code && (
                                                        <span className="inline-flex items-center rounded border bg-muted px-2 py-0.5 font-mono text-[10px] font-medium text-muted-foreground">
                                                            {
                                                                activity
                                                                    .properties
                                                                    .task_code
                                                            }
                                                        </span>
                                                    )}
                                                    {activity.properties
                                                        .role && (
                                                        <span className="inline-flex items-center rounded bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary capitalize">
                                                            {activity.properties.role.replace(
                                                                '-',
                                                                ' ',
                                                            )}
                                                        </span>
                                                    )}
                                                </div>
                                            )}
                                    </div>
                                </Wrapper>
                            );
                        })}
                    </div>
                )}

                {activitiesPaginated && (
                    <DataPagination
                        pagination={activitiesPaginated}
                        only={['activities']}
                    />
                )}
            </section>

            {/* Detail task yang dibuka dari activity log. `manageTasks=false`
                menyembunyikan aksi edit/hapus (tab Info tidak menyediakan
                handler-nya, jadi onEdit/onDelete sengaja no-op). Ini BUKAN
                view-only penuh: sesuai kontrak TaskDetailSheet, user yang
                merupakan assignee tetap bisa update status/komentar/subtask,
                dan yang berhak me-review tetap melihat panel approve/tolak —
                izin itu datang per task dari policy, bukan dari flag ini.
                Navigasi ke subtask jalan dengan mengambil ulang task by id. */}
            <TaskDetailSheet
                task={viewingTask}
                open={isViewingTaskOpen}
                onOpenChange={(open) => {
                    setIsViewingTaskOpen(open);

                    if (!open) {
                        setViewingTask(null);
                    }
                }}
                onEdit={() => {}}
                onDelete={() => {}}
                onNavigate={(id) => openTaskDetail(Number(id))}
                divisionId={divisionId}
                projectMembers={projectMembers}
                can={{ manageTasks: false }}
            />
        </div>
    );
}