import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Avatar, Text, ScrollArea, Tooltip, Loader, Badge, ActionIcon } from '@mantine/core';
import { IconFile, IconDownload, IconX } from '@tabler/icons-react';
import dayjs from 'dayjs';
import { __ } from '@wordpress/i18n';

import { FieldRow } from '../../../ui/TaskDrawer';
import acronym from '../../../ui/acronym';
import { closeTaskViewDrawer } from '../../../Settings/store/taskSlice';
import TaskCommentAndActivity from './TaskCommentAndActivity';

/**
 * ViewTaskDrawer — read-only detail view for an archived task.
 *
 * Dedicated (does NOT reuse the editable field components or the shared
 * TaskDrawer body) so nothing here can mutate an archived task. Visually
 * mirrors the edit drawer's layout via the exported FieldRow + plain display
 * widgets. Driven by the isolated `viewTask` / `taskViewDrawerOpen` slice state;
 * opened from the Archived Tasks list in ViewArchive.
 */

const UserAvatar = ({ user, size = 28 }) => {
    if (!user) return null;
    return (
        <Tooltip label={user.name || ''} position="top" withArrow>
            <Avatar size={size} src={user.avatar || null} radius="xl">
                {user.avatar ? '' : (
                    <Text size="xs" style={{ lineHeight: '14px' }}>
                        {user.name ? acronym(user.name) : ''}
                    </Text>
                )}
            </Avatar>
        </Tooltip>
    );
};

const fmtDate = (d) => (d ? dayjs(d).format('MMM D, YYYY') : null);

const ViewTaskDrawer = () => {
    const dispatch = useDispatch();
    const task = useSelector((s) => s.settings.task.viewTask);
    const loading = useSelector((s) => s.settings.task.viewTaskLoading);
    // When opened from the dashboard My Tasks list, surface the task's
    // workspace / project / section context (tasks there span many projects).
    const fromDashboard = useSelector((s) => s.settings.task.viewTaskSource) === 'dashboard';

    if (loading && !task) {
        return (
            <div className="flex justify-center items-center h-40">
                <Loader size="sm" />
            </div>
        );
    }
    if (!task) return null;

    const members = Array.isArray(task.members) ? task.members : [];
    const tags = Array.isArray(task.tags) ? task.tags : [];
    const attachments = Array.isArray(task.attachments) ? task.attachments : [];
    const children = Array.isArray(task.children) ? task.children : [];
    const feed = Array.isArray(task.commentsAndLogActivities) ? task.commentsAndLogActivities : [];

    // Header badge reflects the task's actual state (archived vs closed/completed).
    const stateLabel = (() => {
        const s = String(task.status || '');
        if (s.startsWith('ARCHIVED')) return __( 'Archived', 'lazytasks-project-task-management' );
        if (s === 'COMPLETED' || s === 'CLOSED') return __( 'Closed', 'lazytasks-project-task-management' );
        return __( 'Read only', 'lazytasks-project-task-management' );
    })();

    const start = fmtDate(task.start_date);
    const end = fmtDate(task.end_date);
    const dueLabel = start && task.start_date_is_visible
        ? __( 'Date', 'lazytasks-project-task-management' )
        : __( 'Due Date', 'lazytasks-project-task-management' );

    return (
        <div className="drawer h-full flex flex-col">
            <div className={`flex flex-col flex-1 overflow-hidden mt-6`}>

                {/* ── Header ── */}
                <div className="drawer-head flex w-full items-start pb-3 mb-3 border-b border-[#E2E8F0]">
                    <div className="flex-1 flex items-start gap-2 min-w-0">
                        <Badge color="gray" variant="light" radius="sm" className="mt-0.5 shrink-0">
                            {stateLabel}
                        </Badge>
                        <Text
                            className="text-[#000000] font-semibold text-[14px]"
                            style={{ display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}
                        >
                            {task.name}
                        </Text>
                    </div>
                    <Tooltip label={__( 'Close', 'lazytasks-project-task-management' )} position="left" withArrow>
                        <ActionIcon
                            variant="subtle"
                            color="gray"
                            onClick={() => dispatch(closeTaskViewDrawer())}
                            aria-label={__( 'Close', 'lazytasks-project-task-management' )}
                        >
                            <IconX size={20} stroke={1.5} />
                        </ActionIcon>
                    </Tooltip>
                </div>

                {/* ── Body ── */}
                <ScrollArea className="flex-1" style={{ minHeight: 0 }} scrollbarSize={4}>
                    <div className="tasks-body flex flex-col gap-4 relative w-full">

                        {task.parent_id === 0 && task.task_serial_no ? (
                            <FieldRow label={__( 'Ref.#', 'lazytasks-project-task-management' )}>
                                <div className="w-3/4">
                                    <span className="bg-[#EBF1F4] text-[#4d4d4d] px-2 py-0.5 rounded text-sm">
                                        {String(task.task_serial_no || '').padStart(4, '0')}
                                    </span>
                                </div>
                            </FieldRow>
                        ) : null}

                        {fromDashboard && (
                            <>
                                <FieldRow label={__( 'Workspace', 'lazytasks-project-task-management' )}>
                                    <div className="w-3/4">
                                        <Text fz={13} c="#1A202C">{task.project?.companyName || task.project?.parent?.name || '—'}</Text>
                                    </div>
                                </FieldRow>
                                <FieldRow label={__( 'Project', 'lazytasks-project-task-management' )}>
                                    <div className="w-3/4">
                                        <Text fz={13} c="#1A202C">{task.project?.name || '—'}</Text>
                                    </div>
                                </FieldRow>
                                <FieldRow label={__( 'Section', 'lazytasks-project-task-management' )}>
                                    <div className="w-3/4">
                                        <Text fz={13} c="#1A202C">{task.section_name || '—'}</Text>
                                    </div>
                                </FieldRow>
                            </>
                        )}

                        <FieldRow label={__( 'Created By', 'lazytasks-project-task-management' )}>
                            <div className="relative w-3/4">
                                <Text fw={400} fz={13} c="#1A202C">{task.createdBy_name}</Text>
                            </div>
                        </FieldRow>

                        <FieldRow label={__( 'Assigned', 'lazytasks-project-task-management' )}>
                            <div className="relative w-3/4">
                                {task.assigned_to
                                    ? <UserAvatar user={task.assigned_to} />
                                    : <Text fz={13} c="#94A3B8">{__( 'Unassigned', 'lazytasks-project-task-management' )}</Text>}
                            </div>
                        </FieldRow>

                        <FieldRow label={__( 'Following', 'lazytasks-project-task-management' )}>
                            <div className="relative w-3/4">
                                {members.length > 0 ? (
                                    <Avatar.Group spacing="sm">
                                        {members.map((m) => <UserAvatar key={m.id} user={m} />)}
                                    </Avatar.Group>
                                ) : <Text fz={13} c="#94A3B8">—</Text>}
                            </div>
                        </FieldRow>

                        <FieldRow label={dueLabel}>
                            <div className="w-3/4">
                                <Text fz={13} c="#1A202C">
                                    {start && end ? `${start} → ${end}` : (end || start || '—')}
                                </Text>
                            </div>
                        </FieldRow>

                        <FieldRow label={__( 'Priority', 'lazytasks-project-task-management' )}>
                            <div className="w-3/4">
                                {task.priority ? (
                                    <span
                                        className="px-2 py-0.5 rounded text-xs font-medium uppercase"
                                        style={{
                                            backgroundColor: task.priority.color_code ? `${task.priority.color_code}20` : '#F1F5F9',
                                            color: task.priority.color_code || '#475569',
                                        }}
                                    >
                                        {task.priority.name}
                                    </span>
                                ) : <Text fz={13} c="#94A3B8">—</Text>}
                            </div>
                        </FieldRow>

                        <FieldRow label={__( 'Status', 'lazytasks-project-task-management' )}>
                            <div className="w-3/4">
                                {task.internal_status ? (
                                    <span
                                        className="px-2 py-0.5 rounded text-xs font-medium uppercase"
                                        style={{
                                            backgroundColor: task.internal_status.color_code ? `${task.internal_status.color_code}20` : '#F1F5F9',
                                            color: task.internal_status.color_code || '#475569',
                                        }}
                                    >
                                        {task.internal_status.name}
                                    </span>
                                ) : <Text fz={13} c="#94A3B8">—</Text>}
                            </div>
                        </FieldRow>

                        <FieldRow label={__( 'Tags', 'lazytasks-project-task-management' )}>
                            <div className="w-3/4 flex flex-wrap gap-1">
                                {tags.length > 0
                                    ? tags.map((t) => (
                                        <span key={t.id} className="bg-[#EBF1F4] text-[#39758D] px-2 py-0.5 rounded text-xs">
                                            {t.name}
                                        </span>
                                    ))
                                    : <Text fz={13} c="#94A3B8">—</Text>}
                            </div>
                        </FieldRow>

                        {/* ── Description ── */}
                        <div>
                            <Text fw={600} fz={12} c="#64748B" mb={6}>{__( 'Description', 'lazytasks-project-task-management' )}</Text>
                            <div className="border border-[#E2E8F0] rounded-md p-3" style={{ maxHeight: 250, overflowY: 'auto' }}>
                                {task.description
                                    ? <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: task.description }} />
                                    : <Text fz={13} c="#94A3B8" fs="italic">{__( 'No description', 'lazytasks-project-task-management' )}</Text>}
                            </div>
                        </div>

                        {/* ── Attachments ── */}
                        {attachments.length > 0 && (
                            <div>
                                <Text fw={600} fz={12} c="#64748B" mb={6}>
                                    {__( 'Attachments', 'lazytasks-project-task-management' )} ({attachments.length})
                                </Text>
                                <div className="flex flex-col gap-1">
                                    {attachments.map((a) => (
                                        <a
                                            key={a.id}
                                            href={a.file_path}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            download
                                            className="flex items-center gap-2 px-2 py-1.5 rounded border border-[#E2E8F0] hover:bg-[#F8FAFC] text-[#1A202C] no-underline"
                                        >
                                            <IconFile size={16} stroke={1.5} />
                                            <span className="flex-1 text-sm truncate">{a.name}</span>
                                            <IconDownload size={16} stroke={1.5} className="text-[#64748B]" />
                                        </a>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* ── Subtasks ── */}
                        {children.length > 0 && (
                            <div className="rounded-xl border border-[#E2E8F0] bg-[#F8FAFC]">
                                <div className="flex items-center gap-2 px-4 py-3 border-b border-[#E2E8F0]">
                                    <Text fw={600} fz={14} c="#0F172A">{__( 'Subtasks', 'lazytasks-project-task-management' )}</Text>
                                    <div className="bg-[#E2E8F0] text-[#475569] px-2 py-0.5 rounded-md text-sm font-bold">
                                        {children.length}
                                    </div>
                                </div>
                                <div className="flex flex-col bg-white rounded-b-xl">
                                    {children.map((sub) => (
                                        <div key={sub.id} className="border-b border-[#F1F5F9] last:border-b-0 p-3 flex justify-between items-center gap-2">
                                            <Text fz={13} c="#1A202C" className="flex-1">{sub.name}</Text>
                                            <div className="flex items-center gap-2">
                                                {sub.status && (
                                                    <span className="px-2 py-0.5 rounded bg-gray-100 text-xs font-medium uppercase text-[#475569]">
                                                        {sub.status?.name || (typeof sub.status === 'string' ? sub.status : '')}
                                                    </span>
                                                )}
                                                {sub.assigned_to && <UserAvatar user={sub.assigned_to} size={24} />}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* ── Comments & Activities (read-only) ── */}
                        {feed.length > 0 && (
                            <div className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl p-4">
                                <Text fw={600} fz={14} c="#0F172A" mb={12}>
                                    {__( 'Comments & Activities', 'lazytasks-project-task-management' )}
                                </Text>
                                <TaskCommentAndActivity
                                    task={task}
                                    selectedValue="Comments & Activities"
                                    hideInput
                                    readOnly
                                />
                            </div>
                        )}

                    </div>
                </ScrollArea>
            </div>
        </div>
    );
};

export default ViewTaskDrawer;