import { useState } from 'react';

import {
    VizRFMCalulatedRangesType,
    VizRFMType,
} from '@/api/types';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { Lang } from '@/lang/Lang';

const VizRFMItem = ({ items, ranges }: { items: VizRFMType[], ranges: VizRFMCalulatedRangesType }) => {


    const getSegmentTitle = (segment?: string) => {
        if (!segment) return '';
        return Lang.key(`viz_rfm_seg_${segment}_name`);
    }
    const getSegmentRecommendation = (segment?: string) => {
        if (!segment) return '';
        return Lang.key(`viz_rfm_seg_${segment}_rec`);
    }

    const getRTitle = (r?: number) => {

        if (!r) return '';

        if (r == 1) return Lang.key('viz_rfm_r_1');
        if (r == 2) return Lang.key('viz_rfm_r_2');
        if (r == 3) return Lang.key('viz_rfm_r_3');

        return '';


    }
    const getFTitle = (f?: number) => {
        if (!f) return '';
        if (f == 1) return Lang.key('viz_rfm_f_1');
        if (f == 2) return Lang.key('viz_rfm_f_2');
        if (f == 3) return Lang.key('viz_rfm_f_3');
        return '';
    }
    const getMTitle = (m?: number) => {
        if (!m) return '';
        if (m == 1) return Lang.key('viz_rfm_m_1');
        if (m == 2) return Lang.key('viz_rfm_m_2');
        if (m == 3) return Lang.key('viz_rfm_m_3');
        return '';
    }

    const [activeSegment, setActiveSegment] = useState<"leaving" | "sleeping" | "active">("active");

    const totalCount = items.reduce((acc, item) => acc + (item.count ?? 0), 0);


    const NumberItem = ({ number }: { number?: number | null }) => {

        if (!number) return <div className=' px-2 rounded-md border-2 border-gray-500 '> - </div>;
        if (number == 1) return <div className=' px-2 rounded-md border-2 border-red-500    '>{number}</div>;
        if (number == 2) return <div className=' px-2 rounded-md border-2 border-blue-500 '>{number}</div>;
        if (number == 3) return <div className=' px-2 rounded-md border-2 border-green-500 '>{number}</div>;
        return <div className=' px-2 rounded-md border-2 border-gray-500 '>{number}</div>;

    }

    return (<>
        <div className='flex justify-center items-center w-full mb-4'>
            <ButtonGroup >
                <Button size="sm" variant={activeSegment === "leaving" ? "default" : "outline"} onClick={() => setActiveSegment("leaving")}>{Lang.key('viz_rfm_tab_leaving')}</Button>
                <Button size="sm" variant={activeSegment === "sleeping" ? "default" : "outline"} onClick={() => setActiveSegment("sleeping")}>{Lang.key('viz_rfm_tab_sleeping')}</Button>
                <Button size="sm" variant={activeSegment === "active" ? "default" : "outline"} onClick={() => setActiveSegment("active")}>{Lang.key('viz_rfm_tab_active')}</Button>

            </ButtonGroup>
        </div>

        <div className='grid grid-cols-3 gap-4'>
            {items.map((item) => {

                if (activeSegment === "leaving" && item.r != 1) return null;
                if (activeSegment === "sleeping" && item.r != 2) return null;
                if (activeSegment === "active" && item.r != 3) return null;

                return <div
                    style={{
                        opacity: item.count ? 1 : 0.4,
                    }}
                    key={item.segment} className='border border-border rounded-md p-2'>
                    <div className='text-xl font-medium text-center flex justify-center items-center gap-2 my-1'>

                        <Tooltip>
                            <TooltipTrigger >
                                <NumberItem number={item.r} />
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{getRTitle(item.r)}</p>
                            </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                            <TooltipTrigger >
                                <NumberItem number={item.f} />
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{getFTitle(item.f)}</p>
                            </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                            <TooltipTrigger >
                                <NumberItem number={item.m} />
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{getMTitle(item.m)}</p>
                            </TooltipContent>
                        </Tooltip>

                    </div>
                    <div className='text-xs font-medium text-center text-muted-foreground'>{getSegmentTitle(item.segment)}</div>

                    <div className='text-xl font-medium text-center'>{!!item.count ? Math.round((item.count ?? 0) * 100 / totalCount) : 0}%</div>
                    <span className='text-xs font-medium text-center block'>
                        {Lang.key('viz_rfm_count_label')} {item.count?.toLocaleString()}
                    </span>

                    <Tooltip>
                        <TooltipTrigger asChild>
                            <div
                                style={{
                                    color: 'var(--color-primary)'
                                }}
                                className='text-xs font-medium text-center cursor-pointer'>{Lang.key('viz_rfm_recommendation')}</div>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p className='max-w-96 text-center'>{getSegmentRecommendation(item.segment)}</p>
                        </TooltipContent>
                    </Tooltip>


                </div>
            })}

        </div>
        <div className='text-xs text-muted-foreground text-center mt-4 px-4'>
            {Lang.key('viz_rfm_bounds_intro')} {Lang.key('viz_rfm_axis_r')} {ranges?.r?.min?.toLocaleString()} - {ranges?.r?.max?.toLocaleString()}
            {Lang.key('viz_rfm_bounds_sep')}{Lang.key('viz_rfm_axis_f')} {ranges?.f?.min?.toLocaleString()} - {ranges?.f?.max?.toLocaleString()}
            {Lang.key('viz_rfm_bounds_sep')}{Lang.key('viz_rfm_axis_m')} {ranges?.m?.min?.toLocaleString()} - {ranges?.m?.max?.toLocaleString()}
        </div>

        <div className='text-xs text-muted-foreground text-center mt-1 px-4'>{Lang.key('viz_rfm_legend')}</div>
    </>
    )
}

export default VizRFMItem;