import { getChartTheme } from '@/components/admin/chart-theme';
import StatCard from '@/components/admin/StatCard';
import { useIsDark } from '@/hooks/useIsDark';
import { Activity, BarChart3, LifeBuoy, MessageSquare } from 'lucide-react';
import {
    Cell,
    Legend,
    Pie,
    PieChart,
    ResponsiveContainer,
    Tooltip,
} from 'recharts';
import { ChartCard, HBar, Section } from './shared';
import type { SupportMetrics } from './types';

const PRIORITY_COLORS: Record<string, string> = {
    Urgent: 'bg-red-500',
    High: 'bg-orange-500',
    Medium: 'bg-yellow-500',
    Low: 'bg-muted-foreground/30',
};

export default function SupportSection({
    support,
}: {
    support: SupportMetrics;
}) {
    const isDark = useIsDark();
    const ct = getChartTheme(isDark);
    const maxCategory = Math.max(...support.by_category.map((c) => c.count), 1);
    const maxPriority = Math.max(...support.by_priority.map((c) => c.count), 1);

    return (
        <Section title="Support" icon={LifeBuoy}>
            {/* KPI row */}
            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
                <StatCard
                    label="Open Tickets"
                    value={support.open_count.toLocaleString()}
                    sub="Awaiting response"
                    icon={LifeBuoy}
                    iconColor="bg-amber-400/25 text-amber-600 dark:bg-amber-400/15 dark:text-amber-400"
                />
                <StatCard
                    label="Total Tickets"
                    value={support.total.toLocaleString()}
                    sub="All time"
                    icon={MessageSquare}
                    iconColor="bg-primary/25 text-primary dark:bg-primary/20"
                />
                <StatCard
                    label="Avg Replies / Ticket"
                    value={support.avg_replies.toFixed(1)}
                    sub="Mean thread depth"
                    icon={Activity}
                    iconColor="bg-sky-400/25 text-sky-600 dark:bg-sky-400/15 dark:text-sky-400"
                />
                <StatCard
                    label="Resolution Rate"
                    value={
                        support.total > 0
                            ? `${Math.round(((support.total - support.open_count) / support.total) * 100)}%`
                            : 'N/A'
                    }
                    sub="Resolved or closed"
                    icon={BarChart3}
                    iconColor="bg-emerald-400/25 text-emerald-600 dark:bg-emerald-400/15 dark:text-emerald-400"
                />
            </div>

            <div className="grid gap-4 lg:grid-cols-3">
                {/* Status breakdown */}
                <ChartCard title="By Status" sub="Ticket status distribution">
                    {support.by_status.length === 0 ? (
                        <p className="text-muted-foreground py-8 text-center text-xs">
                            No tickets yet
                        </p>
                    ) : (
                        <ResponsiveContainer width="100%" height={180}>
                            <PieChart>
                                <Pie
                                    data={support.by_status}
                                    cx="50%"
                                    cy="50%"
                                    outerRadius={70}
                                    dataKey="value"
                                    paddingAngle={2}
                                >
                                    {support.by_status.map((_, i) => (
                                        <Cell
                                            key={i}
                                            fill={
                                                [
                                                    '#3B82F6',
                                                    '#F59E0B',
                                                    '#10B981',
                                                    '#6B7280',
                                                ][i % 4]
                                            }
                                        />
                                    ))}
                                </Pie>
                                <Tooltip
                                    contentStyle={ct.tooltip.contentStyle}
                                />
                                <Legend
                                    formatter={(value) => (
                                        <span
                                            style={{
                                                fontSize: 11,
                                                color: ct.tick.fill,
                                            }}
                                        >
                                            {value}
                                        </span>
                                    )}
                                />
                            </PieChart>
                        </ResponsiveContainer>
                    )}
                </ChartCard>

                {/* By category */}
                <ChartCard title="By Category">
                    {support.by_category.length === 0 ? (
                        <p className="text-muted-foreground py-8 text-center text-xs">
                            No tickets yet
                        </p>
                    ) : (
                        <div className="space-y-2.5 pt-1">
                            {support.by_category.map((c) => (
                                <HBar
                                    key={c.name}
                                    label={c.name}
                                    count={c.count}
                                    max={maxCategory}
                                    color="bg-violet-500"
                                />
                            ))}
                        </div>
                    )}
                </ChartCard>

                {/* By priority */}
                <ChartCard title="By Priority">
                    {support.by_priority.length === 0 ? (
                        <p className="text-muted-foreground py-8 text-center text-xs">
                            No tickets yet
                        </p>
                    ) : (
                        <div className="space-y-2.5 pt-1">
                            {support.by_priority.map((p) => (
                                <HBar
                                    key={p.name}
                                    label={p.name}
                                    count={p.count}
                                    max={maxPriority}
                                    color={
                                        PRIORITY_COLORS[p.name] ?? 'bg-primary'
                                    }
                                />
                            ))}
                        </div>
                    )}
                </ChartCard>
            </div>
        </Section>
    );
}