import { ArrowUpRight, ContactRound, Inbox, Megaphone, MessageSquare, Plug, Workflow, Zap } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { AnalyticsRangeSelect, TrendChart, type AnalyticsPoint, type AnalyticsRange } from '../components/AnalyticsVisuals';
import { useApp } from '../context/AppContext';
import { analyticsApi } from '../services/domain';
import type { AnalyticsDashboard } from '../services/domain';

function chartData<T extends { date: string }>(points: T[] | undefined, key: keyof T): AnalyticsPoint[] {
    return (points ?? []).map((point) => ({ date: point.date, [String(key)]: Number(point[key] ?? 0) }));
}

export function DashboardPage() {
    const { current } = useApp();
    const [searchParams, setSearchParams] = useSearchParams();
    const [stats, setStats] = useState<AnalyticsDashboard | null>(null);
    const [error, setError] = useState('');
    const queryString = searchParams.toString();
    const filters = useMemo(() => {
        const query = new URLSearchParams(queryString);
        const requestedRange = query.get('range');
        const range = ['today', 'last_7_days', 'last_30_days', 'this_month', 'custom'].includes(requestedRange ?? '')
            ? requestedRange as AnalyticsRange : 'last_7_days';
        const params: Record<string, unknown> = { range, timezone: current?.workspace.timezone ?? 'UTC' };
        if (range === 'custom') {
            const from = query.get('from');
            const to = query.get('to');
            if (!from || !to) return null;
            params.from = from; params.to = to;
        }
        return params;
    }, [current?.workspace.timezone, queryString]);
    const requestedRange = searchParams.get('range') as AnalyticsRange | null;
    const range = requestedRange && ['today', 'last_7_days', 'last_30_days', 'this_month', 'custom'].includes(requestedRange)
        ? requestedRange : 'last_7_days';

    useEffect(() => {
        if (!current || !filters) { setStats(null); return; }
        let active = true;
        setError('');
        void analyticsApi.dashboard(current.workspace.id, filters)
            .then((result) => { if (active) setStats(result); })
            .catch((cause: unknown) => { if (active) setError(cause instanceof Error ? cause.message : 'Could not load dashboard analytics.'); });
        return () => { active = false; };
    }, [current?.workspace.id, filters]);

    function updateFilter(key: string, value: string) {
        const next = new URLSearchParams(searchParams);
        if (value) next.set(key, value); else next.delete(key);
        if (key === 'range' && value !== 'custom') {
            next.delete('from');
            next.delete('to');
        }
        setSearchParams(next, { replace: true });
    }

    const primary = [
        { label: 'Contacts', value: stats?.contacts.total, note: `+${(stats?.contacts.new ?? 0).toLocaleString()} in range`, icon: ContactRound, color: 'purple' },
        { label: 'Conversations', value: stats?.conversations.total, note: `${(stats?.conversations.open ?? 0).toLocaleString()} open`, icon: Inbox, color: 'blue' },
        { label: 'Messages', value: stats?.messages.total, note: `${(stats?.messages.incoming ?? 0).toLocaleString()} incoming`, icon: MessageSquare, color: 'green' },
        { label: 'Automation runs', value: stats?.automations.executions, note: `${(stats?.automations.completed ?? 0).toLocaleString()} completed`, icon: Zap, color: 'pink' },
    ];
    const custom = range === 'custom';
    return (
        <div className="dashboard-page">
            <div className="page-heading analytics-heading">
                <div><div className="eyebrow">OVERVIEW</div><h1>Dashboard</h1><p>Workspace performance in {current?.workspace.timezone}.</p></div>
                <div className="analytics-filterbar">
                    <AnalyticsRangeSelect range={range} onChange={(value) => updateFilter('range', value)} />
                    {custom && <>
                        <label className="analytics-range"><span>From</span><input aria-label="From date" type="date" value={searchParams.get('from') ?? ''} onChange={(event) => updateFilter('from', event.target.value)} /></label>
                        <label className="analytics-range"><span>To</span><input aria-label="To date" type="date" value={searchParams.get('to') ?? ''} onChange={(event) => updateFilter('to', event.target.value)} /></label>
                    </>}
                </div>
            </div>
            {error && <div role="alert" className="alert-error">{error}</div>}
            {!filters ? <div className="panel analytics-empty">Choose both custom date boundaries to load dashboard analytics.</div> : <>
                <div className="stats-grid dashboard-analytics-cards">
                    {primary.map(({ label, value, note, icon: Icon, color }) => (
                        <div className="stat-card" key={label}><div className={`stat-icon ${color}`}><Icon size={19} /></div><span className="stat-label">{label}</span><strong>{value?.toLocaleString() ?? '—'}</strong><span className="stat-foot">{note}</span></div>
                    ))}
                </div>
                <div className="dashboard-secondary">
                    <div className="dashboard-secondary-card"><Megaphone size={17} /><span>Broadcast delivery</span><b>{((stats?.broadcasts.delivery_rate ?? 0) * 100).toFixed(1)}%</b><small>{(stats?.broadcasts.delivered ?? 0).toLocaleString()} delivered</small></div>
                    <div className="dashboard-secondary-card"><Workflow size={17} /><span>AI runs</span><b>{stats?.ai.runs.toLocaleString() ?? '—'}</b><small>{(stats?.ai.failed ?? 0).toLocaleString()} failed</small></div>
                    <div className="dashboard-secondary-card"><MessageSquare size={17} /><span>Human handoffs</span><b>{stats?.conversations.human_handoffs.toLocaleString() ?? '—'}</b><small>Conversations paused for human support</small></div>
                </div>
                <div className="dashboard-analytics-charts">
                    <TrendChart title="Contact growth" points={chartData(stats?.series.contacts, 'new_contacts')} metric="new_contacts" />
                    <TrendChart title="Messages over time" points={chartData(stats?.series.messages, 'messages')} metric="messages" />
                    <TrendChart title="Automation executions" points={chartData(stats?.series.executions, 'executions')} metric="executions" />
                </div>
            </>}
            <div className="dashboard-grid">
                <section className="panel welcome-panel">
                    <div className="panel-heading"><div><div className="eyebrow">GETTING STARTED</div><h2>Build a better conversation</h2></div><span className="step-count">01 / 03</span></div>
                    <p>Connect your channels and create your first automation to bring every customer conversation into one place.</p>
                    <div className="getting-started">
                        <Link to="/app/channels" className="getting-item"><span className="getting-icon"><Plug size={17} /></span><span><b>Connect a channel</b><small>Bring messages into your inbox</small></span><ArrowUpRight size={16} /></Link>
                        <Link to="/app/automation/flows" className="getting-item"><span className="getting-icon"><Workflow size={17} /></span><span><b>Create your first flow</b><small>Automate common conversations</small></span><ArrowUpRight size={16} /></Link>
                        <Link to="/app/inbox" className="getting-item"><span className="getting-icon"><Inbox size={17} /></span><span><b>Visit your inbox</b><small>Reply and collaborate with your team</small></span><ArrowUpRight size={16} /></Link>
                    </div>
                </section>
                <section className="panel activity-panel"><div className="panel-heading"><div><div className="eyebrow">WORKSPACE</div><h2>Quick links</h2></div></div>
                    <Link className="quick-link" to="/app/contacts"><ContactRound size={17} /><span>Manage contacts</span><ArrowUpRight size={15} /></Link>
                    <Link className="quick-link" to="/app/automation/flows"><Workflow size={17} /><span>Automation flows</span><ArrowUpRight size={15} /></Link>
                    <Link className="quick-link" to="/app/inbox"><Inbox size={17} /><span>Open unified inbox</span><ArrowUpRight size={15} /></Link>
                    <Link className="quick-link" to="/app/broadcasts"><Megaphone size={17} /><span>Manage broadcasts</span><ArrowUpRight size={15} /></Link>
                    <Link className="quick-link" to="/app/analytics"><Zap size={17} /><span>Open analytics</span><ArrowUpRight size={15} /></Link>
                </section>
            </div>
        </div>
    );
}