'use client';

import React, { useState, useMemo } from 'react';
import type { DetalhesAtividade } from '@/types/atividade';
import {
    Timeline,
    Typography,
    Space,
    Tag,
    Input,
    Select,
    DatePicker,
    Button,
    Empty,
    Card,
} from 'antd';
import { Clock, Filter, Plus, Search, X } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import dayjs, { Dayjs } from 'dayjs';
import { formatDate } from '@/lib/utils/export';

const { Title, Text, Paragraph } = Typography;
const { RangePicker } = DatePicker;

export interface ActivityItem {
    tipo: 'criacao' | 'comentario' | 'anexo' | 'status' | 'tarefa_criada';
    data: string;
    usuario: { id: number; nome: string; email?: string } | null;
    descricao: string;
    detalhes: DetalhesAtividade;
    tarefa_id?: number | null;
    projeto_id?: number | null;
}

interface ActivityFeedProps {
    activities: ActivityItem[];
    loading?: boolean;
    title?: string;
    showFilters?: boolean;
    onFilterChange?: (filters: ActivityFilters) => void;
}

export interface ActivityFilters {
    tipo?: string;
    usuario_id?: number;
    data_inicio?: string;
    data_fim?: string;
    busca?: string;
    tarefa_id?: number;
}

export function ActivityFeed({
    activities,
    loading = false,
    title = 'Timeline de Atividades',
    showFilters = true,
    onFilterChange,
}: ActivityFeedProps) {
    const [filters, setFilters] = useState<ActivityFilters>({});
    const [showFilterPanel, setShowFilterPanel] = useState(false);

    // Aplicar filtros localmente se não houver callback
    const filteredActivities = useMemo(() => {
        if (!onFilterChange) {
            let filtered = [...activities];

            if (filters.tipo) {
                filtered = filtered.filter((a) => a.tipo === filters.tipo);
            }

            if (filters.usuario_id) {
                filtered = filtered.filter(
                    (a) => a.usuario?.id === filters.usuario_id
                );
            }

            if (filters.data_inicio) {
                filtered = filtered.filter((a) => a.data >= filters.data_inicio!);
            }

            if (filters.data_fim) {
                filtered = filtered.filter((a) => a.data <= filters.data_fim!);
            }

            if (filters.busca) {
                const buscaLower = filters.busca.toLowerCase();
                filtered = filtered.filter(
                    (a) =>
                        a.descricao.toLowerCase().includes(buscaLower) ||
                        (a.detalhes.conteudo &&
                            a.detalhes.conteudo.toLowerCase().includes(buscaLower)) ||
                        (a.detalhes.titulo &&
                            a.detalhes.titulo.toLowerCase().includes(buscaLower)) ||
                        (a.detalhes.tarefa_titulo &&
                            a.detalhes.tarefa_titulo.toLowerCase().includes(buscaLower)) ||
                        (a.detalhes.nome_original &&
                            a.detalhes.nome_original.toLowerCase().includes(buscaLower)) ||
                        (a.usuario &&
                            a.usuario.nome.toLowerCase().includes(buscaLower))
                );
            }

            if (filters.tarefa_id) {
                filtered = filtered.filter((a) => a.tarefa_id === filters.tarefa_id);
            }

            return filtered;
        }

        return activities;
    }, [activities, filters, onFilterChange]);

    const handleFilterChange = (key: keyof ActivityFilters, value: string | number | undefined) => {
        const newFilters = { ...filters, [key]: value };
        setFilters(newFilters);
        onFilterChange?.(newFilters);
    };

    const handleClearFilters = () => {
        const clearedFilters: ActivityFilters = {};
        setFilters(clearedFilters);
        onFilterChange?.(clearedFilters);
    };

    const handleDateRangeChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
        if (dates && dates[0] && dates[1]) {
            handleFilterChange('data_inicio', dates[0].format('Y-MM-DD'));
            handleFilterChange('data_fim', dates[1].format('Y-MM-DD'));
        } else {
            handleFilterChange('data_inicio', undefined);
            handleFilterChange('data_fim', undefined);
        }
    };

    const getTypeColor = (tipo: string) => {
        const colors: Record<string, string> = {
            criacao: 'green',
            tarefa_criada: 'cyan',
            comentario: 'blue',
            anexo: 'orange',
            status: 'purple',
        };
        return colors[tipo] || 'blue';
    };

    const getTypeIcon = (tipo: string) => {
        switch (tipo) {
            case 'criacao':
            case 'tarefa_criada':
                return <Plus size={ICON_SIZE_MD} aria-hidden />;
            case 'comentario':
                return <span>💬</span>;
            case 'anexo':
                return <span>📎</span>;
            case 'status':
                return <span>🔄</span>;
            default:
                return <Clock size={ICON_SIZE_MD} aria-hidden />;
        }
    };

    const getTypeLabel = (tipo: string) => {
        const labels: Record<string, string> = {
            criacao: 'Criação',
            tarefa_criada: 'Tarefa Criada',
            comentario: 'Comentário',
            anexo: 'Anexo',
            status: 'Mudança de Status',
        };
        return labels[tipo] || tipo;
    };

    const timelineItems = filteredActivities.map((item) => {
        const color = getTypeColor(item.tipo);
        const icon = getTypeIcon(item.tipo);

        return {
            color,
            dot: icon,
            children: (
                <div>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            marginBottom: 4,
                        }}
                    >
                        <Space>
                            <Tag color={color}>{getTypeLabel(item.tipo)}</Tag>
                            <Typography.Text strong>{item.descricao}</Typography.Text>
                        </Space>
                        <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
                            {formatDate(item.data, true)}
                        </Typography.Text>
                    </div>
                    {item.usuario && (
                        <Typography.Text
                            type="secondary"
                            style={{ fontSize: '12px', display: 'block', marginBottom: 8 }}
                        >
                            Por: {item.usuario.nome}
                        </Typography.Text>
                    )}
                    {item.tipo === 'comentario' && item.detalhes.conteudo && (
                        <Paragraph
                            style={{ marginBottom: 0, whiteSpace: 'pre-wrap', fontSize: '13px' }}
                        >
                            {item.detalhes.conteudo}
                        </Paragraph>
                    )}
                    {item.tipo === 'anexo' && item.detalhes.nome_original && (
                        <Typography.Text type="secondary" style={{ fontSize: '13px' }}>
                            📎 {item.detalhes.nome_original}
                        </Typography.Text>
                    )}
                    {item.tipo === 'status' && item.detalhes.status && (
                        <Tag color={item.detalhes.status === 'concluida' ? 'green' : 'blue'}>
                            {item.detalhes.status}
                        </Tag>
                    )}
                    {item.detalhes.tarefa_titulo && (
                        <Typography.Text type="secondary" style={{ fontSize: '12px', display: 'block', marginTop: 4 }}>
                            Tarefa: {item.detalhes.tarefa_titulo}
                        </Typography.Text>
                    )}
                </div>
            ),
        };
    });

    const hasActiveFilters = Object.values(filters).some((v) => v !== undefined && v !== '');

    return (
        <div>
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: 16,
                }}
            >
                <Title level={5} style={{ marginBottom: 0 }}>
                    {title}
                </Title>
                {showFilters && (
                    <Space>
                        <Input
                            placeholder="Buscar atividades..."
                            prefix={<Search size={ICON_SIZE_MD} aria-hidden />}
                            value={filters.busca}
                            onChange={(e) => handleFilterChange('busca', e.target.value)}
                            style={{ width: 250 }}
                            allowClear
                        />
                        <Button
                            icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                            onClick={() => setShowFilterPanel(!showFilterPanel)}
                            type={hasActiveFilters ? 'primary' : 'default'}
                            aria-expanded={showFilterPanel}
                            aria-label="Mostrar ou ocultar filtros do feed de atividades"
                        >
                            Filtros
                        </Button>
                        {hasActiveFilters && (
                            <Button
                                icon={<X size={ICON_SIZE_MD} aria-hidden />}
                                onClick={handleClearFilters}
                                type="text"
                            >
                                Limpar
                            </Button>
                        )}
                    </Space>
                )}
            </div>

            {showFilters && showFilterPanel && (
                <Card size="small" style={{ marginBottom: 16 }}>
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                        <Space wrap>
                            <div>
                                <Text strong style={{ display: 'block', marginBottom: 4 }}>
                                    Tipo:
                                </Text>
                                <Select
                                    placeholder="Todos os tipos"
                                    value={filters.tipo}
                                    onChange={(value) => handleFilterChange('tipo', value)}
                                    style={{ width: 200 }}
                                    allowClear
                                >
                                    <Select.Option value="criacao">Criação</Select.Option>
                                    <Select.Option value="tarefa_criada">Tarefa Criada</Select.Option>
                                    <Select.Option value="comentario">Comentário</Select.Option>
                                    <Select.Option value="anexo">Anexo</Select.Option>
                                    <Select.Option value="status">Mudança de Status</Select.Option>
                                    <Select.Option value="">Todos os tipos</Select.Option>
                                </Select>
                            </div>
                            <div>
                                <Text strong style={{ display: 'block', marginBottom: 4 }}>
                                    Período:
                                </Text>
                                <RangePicker
                                    value={
                                        filters.data_inicio && filters.data_fim
                                            ? [
                                                  dayjs(filters.data_inicio),
                                                  dayjs(filters.data_fim),
                                              ]
                                            : null
                                    }
                                    onChange={handleDateRangeChange}
                                    format="DD/MM/YYYY"
                                />
                            </div>
                        </Space>
                    </Space>
                </Card>
            )}

            {loading ? (
                <Empty description="Carregando atividades..." />
            ) : timelineItems.length > 0 ? (
                <Timeline mode="left" style={{ marginTop: 24 }} items={timelineItems} />
            ) : (
                <Empty description="Nenhuma atividade encontrada" />
            )}
        </div>
    );
}