import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import {
    ArrowRight,
    CheckCircle2,
    ChevronDown,
    FileText,
    HousePlus,
    MapPin,
    MoveLeft,
    Search,
    Trash2,
} from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import type { Folder, Location, Status, User } from '../types';
import { ActionButton } from './ActionButton';
import { AddContratDialog } from './ContractDialogs';
import { EditFolderDialog } from './EditFolderDialog';
import { AddEventDialog } from './EventDialogs';
import { FolderActions } from './FolderActions';
import { FolderCardDetails } from './FolderCardDetails';
import { SendAssuranceMailDialog } from './InsuranceDialogs';
import { MissingItemsBadge } from './MissingItemsBadge';

type ChipTone = 'success' | 'warning' | 'neutral';

const chipClasses: Record<ChipTone, string> = {
    success: 'bg-secondary/15 text-secondary',
    warning: 'bg-amber-100 text-amber-700',
    neutral: 'bg-gray-100 text-gray-600',
};

const dotClasses: Record<ChipTone, string> = {
    success: 'bg-secondary',
    warning: 'bg-amber-500',
    neutral: 'bg-gray-400',
};

// Force the shared (dark-themed) action buttons to dark text so they stay
// readable on the white rows/panel. Scoped to this light list only.
const LIGHT_ACTIONS =
    '[&_a]:!text-gray-700 [&_a:hover]:!bg-gray-100 [&_a:hover]:!text-gray-900 [&_button]:!text-gray-700 [&_button:hover]:!bg-gray-100 [&_button:hover]:!text-gray-900';

// Active accent — brand green with white text (selected pills).
const ACTIVE_PILL = { backgroundColor: 'var(--secondary)', color: '#ffffff' } as const;

export const FolderListView = ({
    folders,
    statuses,
    users,
    phonesPrefix,
    locations,
}: {
    folders: Folder[];
    statuses: Status[];
    users: User[];
    phonesPrefix: string[];
    locations: Location[];
}) => {
    const { t } = useTranslation();
    const [stageFilter, setStageFilter] = useState<number | 'all'>(() => {
        if (typeof window === 'undefined') return 'all';
        const v = window.localStorage.getItem('onboarding_stage_filter');
        if (!v || v === 'all') return 'all';
        const n = Number(v);
        return Number.isFinite(n) ? n : 'all';
    });
    const [query, setQuery] = useState('');
    const [sort, setSort] = useState<'recent' | 'owner' | 'stage'>(() => {
        if (typeof window === 'undefined') return 'recent';
        const v = window.localStorage.getItem('onboarding_sort');
        return v === 'owner' || v === 'stage' ? v : 'recent';
    });
    const [expandedId, setExpandedId] = useState<number | null>(null);

    useEffect(() => {
        if (typeof window !== 'undefined') window.localStorage.setItem('onboarding_stage_filter', String(stageFilter));
    }, [stageFilter]);
    useEffect(() => {
        if (typeof window !== 'undefined') window.localStorage.setItem('onboarding_sort', sort);
    }, [sort]);

    const statusById = useMemo(() => new Map<number, Status>(statuses.map((s) => [s.id, s])), [statuses]);

    const getNextStatus = (statusId: number) => {
        const i = statuses.findIndex((s) => s.id === statusId);
        return i !== -1 && i < statuses.length - 1 ? statuses[i + 1] : null;
    };
    const getPreviousStatus = (statusId: number) => {
        const i = statuses.findIndex((s) => s.id === statusId);
        return i > 0 ? statuses[i - 1] : null;
    };

    const visibleFolders = useMemo(() => {
        const q = query.trim().toLowerCase();
        let list = folders;
        if (stageFilter !== 'all') list = list.filter((f) => f.status_id === stageFilter);
        if (q) {
            list = list.filter((f) =>
                `${f.owner_name} ${f.owner_lastname ?? ''} ${f.property_title} ${f.city ?? ''} ${f.code_contrat ?? ''}`
                    .toLowerCase()
                    .includes(q),
            );
        }
        const sorted = [...list];
        if (sort === 'owner') sorted.sort((a, b) => a.owner_name.localeCompare(b.owner_name));
        else if (sort === 'stage')
            sorted.sort((a, b) => (statusById.get(a.status_id)?.order_index ?? 0) - (statusById.get(b.status_id)?.order_index ?? 0));
        else sorted.sort((a, b) => b.id - a.id);
        return sorted;
    }, [folders, stageFilter, query, sort, statusById]);

    const chipFor = (folder: Folder, status?: Status): { label: string; tone: ChipTone } => {
        switch (status?.key) {
            case 'contract':
                if (folder.contrat_sign_date) return { label: t('crm', 'chip_contract_signed'), tone: 'success' };
                if (folder.code_contrat) return { label: t('crm', 'chip_mandate_created'), tone: 'neutral' };
                return { label: t('crm', 'chip_no_mandate'), tone: 'warning' };
            case 'insurance':
                if (folder.code_assurance) return { label: t('crm', 'chip_insured'), tone: 'success' };
                if (folder.mail_assurance_envoye) return { label: t('crm', 'chip_insurance_sent'), tone: 'neutral' };
                return { label: t('crm', 'chip_pending'), tone: 'warning' };
            case 'quality':
                if (folder.cq_checklist_completed) return { label: t('crm', 'chip_quality_done'), tone: 'success' };
                if (folder.cq_date) return { label: t('crm', 'chip_quality_scheduled'), tone: 'neutral' };
                return { label: t('crm', 'chip_quality_todo'), tone: 'warning' };
            case 'listing':
                return folder.listing_created
                    ? { label: t('crm', 'chip_listing_created'), tone: 'success' }
                    : { label: t('crm', 'chip_to_publish'), tone: 'neutral' };
            case 'update':
                return { label: t('crm', 'chip_to_update'), tone: 'neutral' };
            default:
                return { label: t('crm', 'chip_new'), tone: 'neutral' };
        }
    };

    const nextButton = (folder: Folder) => {
        const next = getNextStatus(folder.status_id);
        if (!next) return null;
        return (
            <ActionButton
                as="link"
                href={route('crm.onboarding.move', { folder: folder.id, status_id: next.id })}
                method="patch"
                icon={<ArrowRight className="h-4 w-4" />}
                label={t('crm', 'action_move_next_label')}
                tooltipTitle={t('crm', 'action_move_next_label')}
                tooltipTechnical={t('crm', 'action_move_next_tech')}
            />
        );
    };

    // The single contextual primary action shown on the collapsed row.
    const primaryAction = (folder: Folder, status?: Status) => {
        switch (status?.key) {
            case 'contract':
                return folder.code_contrat ? nextButton(folder) : <AddContratDialog onboarding_folder={folder} />;
            case 'insurance':
                return folder.code_assurance ? nextButton(folder) : <SendAssuranceMailDialog onboarding_folder={folder} />;
            case 'listing':
                return folder.listing_created ? (
                    nextButton(folder)
                ) : (
                    <ActionButton
                        as="anchor"
                        href={route('logements.create', { onboarding_folder_id: folder.id })}
                        target="_blank"
                        rel="noopener noreferrer"
                        icon={<HousePlus className="h-4 w-4" />}
                        label={t('crm', 'action_create_listing_label')}
                        tooltipTitle={t('crm', 'action_create_listing_label')}
                        tooltipTechnical={t('crm', 'action_create_listing_tech')}
                    />
                );
            case 'update':
                return (
                    <ActionButton
                        as="link"
                        href={route('crm.onboarding.toggle.checked', { folder: folder.id })}
                        method="patch"
                        icon={<CheckCircle2 className="h-4 w-4" />}
                        label={t('crm', 'action_finish_folder_label')}
                        tooltipTitle={t('crm', 'action_finish_folder_label')}
                        tooltipTechnical={t('crm', 'action_finish_folder_tech')}
                        tone="success"
                    />
                );
            default:
                return nextButton(folder);
        }
    };

    return (
        <div className="flex min-h-0 min-w-0 flex-1 flex-col px-4 py-3">
            {/* Pipeline rail — stage filters with counts */}
            <div className="mb-3 flex flex-wrap gap-1.5">
                <button
                    type="button"
                    onClick={() => setStageFilter('all')}
                    style={stageFilter === 'all' ? ACTIVE_PILL : undefined}
                    className={cn(
                        'inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
                        stageFilter === 'all' ? 'border-transparent' : 'border-border text-muted-foreground hover:bg-muted',
                    )}
                >
                    {t('crm', 'all')}
                    <span className={cn('rounded-full px-1.5 text-[11px]', stageFilter === 'all' ? 'bg-black/10' : 'bg-muted text-foreground')}>
                        {folders.length}
                    </span>
                </button>
                {statuses.map((status) => {
                    const count = folders.filter((f) => f.status_id === status.id).length;
                    const active = stageFilter === status.id;
                    return (
                        <button
                            key={status.id}
                            type="button"
                            onClick={() => setStageFilter(status.id)}
                            style={active ? ACTIVE_PILL : undefined}
                            className={cn(
                                'inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
                                active ? 'border-transparent' : 'border-border text-muted-foreground hover:bg-muted',
                            )}
                        >
                            <span
                                className={cn(
                                    'flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-bold',
                                    active ? 'bg-black/10' : 'bg-secondary/20 text-secondary',
                                )}
                            >
                                {status.order_index}
                            </span>
                            <span className="max-w-[160px] truncate">{status.name}</span>
                            <span className={cn('rounded-full px-1.5 text-[11px]', active ? 'bg-black/10' : 'bg-muted text-foreground')}>
                                {count}
                            </span>
                        </button>
                    );
                })}
            </div>

            {/* Search + sort */}
            <div className="mb-2 flex flex-wrap gap-2">
                <div className="relative min-w-[220px] flex-1">
                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                    <input
                        type="text"
                        value={query}
                        onChange={(e) => setQuery(e.target.value)}
                        placeholder={t('crm', 'search_folders_placeholder')}
                        className="h-9 w-full rounded-lg border border-gray-200 bg-white pr-3 pl-9 text-sm text-gray-900 placeholder:text-gray-400 focus:border-secondary focus:outline-none"
                    />
                </div>
                <select
                    value={sort}
                    onChange={(e) => setSort(e.target.value as typeof sort)}
                    className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-700 focus:border-secondary focus:outline-none"
                >
                    <option value="recent">{t('crm', 'sort_recent')}</option>
                    <option value="owner">{t('crm', 'sort_owner')}</option>
                    <option value="stage">{t('crm', 'sort_stage')}</option>
                </select>
            </div>

            {/* Result count */}
            <div className="mb-2 px-0.5 text-xs text-white/50">
                {visibleFolders.length} {visibleFolders.length > 1 ? t('crm', 'results') : t('crm', 'result')}
            </div>

            {/* Rows */}
            <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
                {visibleFolders.length === 0 ? (
                    <div className="flex flex-col items-center justify-center gap-2 px-1 py-12 text-center">
                        <Search className="h-6 w-6 text-gray-300" />
                        <p className="text-sm text-gray-500">{t('crm', 'no_folder_found')}</p>
                        {(stageFilter !== 'all' || query.trim() !== '') && (
                            <button
                                type="button"
                                onClick={() => {
                                    setStageFilter('all');
                                    setQuery('');
                                }}
                                className="text-secondary text-xs underline-offset-2 hover:underline"
                            >
                                {t('crm', 'reset_filters')}
                            </button>
                        )}
                    </div>
                ) : (
                    visibleFolders.map((folder) => {
                        const status = statusById.get(folder.status_id);
                        const chip = chipFor(folder, status);
                        const isOpen = expandedId === folder.id;
                        const ownerLabel = [folder.owner_name, folder.owner_lastname].filter(Boolean).join(' ').trim();
                        return (
                            <div key={folder.id} className="border-b border-gray-100 last:border-b-0">
                                <div className={cn('flex items-center gap-3 px-3 py-2 transition-colors hover:bg-gray-50', isOpen && 'bg-gray-50')}>
                                    {/* Pipeline position — 5-step mini stepper */}
                                    <div className="flex w-8 shrink-0 flex-col items-center gap-1" title={`${status?.order_index ?? 0}/${statuses.length}`}>
                                        <div className="flex items-center gap-0.5">
                                            {statuses.map((s) => (
                                                <span
                                                    key={s.id}
                                                    className={cn(
                                                        'h-1.5 w-1.5 rounded-full',
                                                        (status?.order_index ?? 0) >= s.order_index ? 'bg-secondary' : 'bg-gray-200',
                                                    )}
                                                />
                                            ))}
                                        </div>
                                        <span className="text-[10px] leading-none text-gray-400">
                                            {status?.order_index ?? '–'}/{statuses.length}
                                        </span>
                                    </div>
                                    {/* Mobile status dot (chip is hidden on small screens) */}
                                    <span className={cn('h-2 w-2 shrink-0 rounded-full sm:hidden', dotClasses[chip.tone])} title={chip.label} />
                                    <button
                                        type="button"
                                        onClick={() => setExpandedId(isOpen ? null : folder.id)}
                                        className="flex min-w-0 flex-1 flex-col items-start text-left"
                                    >
                                        <span className="truncate text-sm font-medium text-gray-900">
                                            {ownerLabel || folder.property_title || `#${folder.id}`}
                                        </span>
                                        <span className="flex items-center gap-1.5 truncate text-xs text-gray-500">
                                            {status?.name}
                                            {folder.city ? ` · ${folder.city}` : ''}
                                            {folder.code_contrat ? ` · ${folder.code_contrat}` : ''}
                                        </span>
                                    </button>
                                    <MissingItemsBadge warnings={folder.warnings} />
                                    <span className={cn('hidden shrink-0 rounded-md px-2 py-1 text-[11px] font-medium sm:inline-block', chipClasses[chip.tone])}>
                                        {chip.label}
                                    </span>
                                    <div className={cn('flex shrink-0 items-center gap-1', LIGHT_ACTIONS)}>
                                        {primaryAction(folder, status)}
                                        <button
                                            type="button"
                                            onClick={() => setExpandedId(isOpen ? null : folder.id)}
                                            aria-label={t('crm', 'details')}
                                            className="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700"
                                        >
                                            <ChevronDown className={cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')} />
                                        </button>
                                    </div>
                                </div>

                                {isOpen && (
                                    <div className={cn('border-t border-gray-200 bg-gray-50 px-4 py-3', LIGHT_ACTIONS)}>
                                        <div className="mb-3 flex flex-wrap items-center gap-1">
                                            <FolderActions statusKey={status?.key ?? null} folder={folder} users={users} phonesPrefix={phonesPrefix} />
                                        </div>
                                        <div className="flex flex-wrap items-center justify-between gap-1 border-t border-gray-200 pt-2">
                                            <div className="flex flex-wrap items-center gap-1">
                                                <AddEventDialog onboarding_folder_id={folder.id} users={users} />
                                                <EditFolderDialog statuses={statuses} folder={folder} phonesPrefix={phonesPrefix} locations={locations} />
                                                <ActionButton
                                                    as="link"
                                                    href={route('crm.onboarding.destroy', { folder })}
                                                    method="delete"
                                                    icon={<Trash2 className="h-4 w-4" />}
                                                    label={t('crm', 'action_delete_folder_label')}
                                                    tooltipTitle={t('crm', 'action_delete_folder_label')}
                                                    tooltipTechnical={t('crm', 'action_delete_folder_tech')}
                                                    tone="danger"
                                                />
                                            </div>
                                            <div className="flex items-center gap-1">
                                                {getPreviousStatus(folder.status_id) && (
                                                    <ActionButton
                                                        as="link"
                                                        href={route('crm.onboarding.move', {
                                                            folder: folder.id,
                                                            status_id: getPreviousStatus(folder.status_id)!.id,
                                                        })}
                                                        method="patch"
                                                        icon={<MoveLeft className="h-4 w-4" />}
                                                        label={t('crm', 'action_move_prev_label')}
                                                        tooltipTitle={t('crm', 'action_move_prev_label')}
                                                        tooltipTechnical={t('crm', 'action_move_prev_tech')}
                                                    />
                                                )}
                                                {nextButton(folder)}
                                            </div>
                                        </div>
                                        <div className="mt-1">
                                            <FolderCardDetails folder={folder} />
                                        </div>
                                    </div>
                                )}
                            </div>
                        );
                    })
                )}
            </div>
        </div>
    );
};