'use client';

import Link from 'next/link';
import type { ReactNode } from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
import { cn } from '@/lib/utils';

export const PASTEL_STAT_BACKGROUNDS = [
  'bg-[rgba(160,226,224,0.55)]',
  'bg-[rgba(255,235,105,0.55)]',
  'bg-[rgba(255,192,145,0.55)]',
  'bg-[rgba(255,214,239,0.55)]',
  'bg-[rgba(146,189,245,0.55)]',
  'bg-[rgba(250,184,81,0.55)]',
  'bg-[rgba(158,232,114,0.55)]',
  'bg-[rgba(116,202,255,0.55)]',
] as const;

const PASTEL_ICON_BG = [
  'bg-[rgba(160,226,224,0.45)]',
  'bg-[rgba(255,235,105,0.45)]',
  'bg-[rgba(255,192,145,0.45)]',
  'bg-[rgba(255,214,239,0.45)]',
  'bg-[rgba(146,189,245,0.45)]',
  'bg-[rgba(250,184,81,0.45)]',
  'bg-[rgba(158,232,114,0.45)]',
  'bg-[rgba(116,202,255,0.45)]',
] as const;

function TrendUpGlyph({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="14" height="14" className={className} aria-hidden>
      <path fill="currentColor" d="M14 4.667a.5.5 0 0 0 0-.14.4.4 0 0 0-.033-.114 1 1 0 0 0-.06-.093.5.5 0 0 0-.094-.113l-.08-.047a.5.5 0 0 0-.126-.067h-.133a.5.5 0 0 0-.14-.093H10a.667.667 0 0 0 0 1.333h1.887L9.22 8.473 6.34 6.76a.67.67 0 0 0-.853.147l-3.333 4a.666.666 0 1 0 1.026.853L6.147 8.2l2.847 1.707a.67.67 0 0 0 .846-.14l2.827-3.3V8A.667.667 0 1 0 14 8z" />
    </svg>
  );
}

function TrendDownGlyph({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="14" height="14" className={className} aria-hidden>
      <path fill="currentColor" d="M14 11.333a.5.5 0 0 1 0 .14.4.4 0 0 1-.033.114 1 1 0 0 1-.06.093.5.5 0 0 1-.094.113l-.08.047a.5.5 0 0 1-.126.067h-.133a.5.5 0 0 1-.14.093H10a.667.667 0 0 1 0-1.333h1.887L9.22 7.527 6.34 9.24a.67.67 0 0 1-.853-.147l-3.333-4A.667.667 0 1 1 3.18 4.24L6.147 7.8l2.847-1.707a.67.67 0 0 1 .846.14l2.827 3.3V8A.667.667 0 1 1 14 8z" />
    </svg>
  );
}

export type PastelStatItem = {
  label: string;
  value: ReactNode;
  href?: string;
  trendPct?: string;
  trendUp?: boolean;
  bgIndex?: number;
  icon?: ReactNode;
};

export function PastelStatCard({ label, value, href, trendPct, trendUp, bgIndex = 0, icon }: PastelStatItem) {
  const bg = PASTEL_STAT_BACKGROUNDS[bgIndex % PASTEL_STAT_BACKGROUNDS.length];
  const iconBg = PASTEL_ICON_BG[bgIndex % PASTEL_ICON_BG.length];
  const hasTrend = trendPct != null && trendPct !== '';

  const inner = (
    <div
      className={cn(
        'relative flex min-h-[156px] flex-col justify-between rounded-2xl p-5 overflow-hidden',
        'transition-all duration-200',
        'dark:ring-1 dark:ring-white/10',
        bg,
      )}
    >
      {/* Decorative circle */}
      <div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-white/20 dark:bg-white/5" aria-hidden />
      <div className="absolute -right-2 -top-2 h-12 w-12 rounded-full bg-white/15 dark:bg-white/5" aria-hidden />

      {/* Top row: icon + trend */}
      <div className="relative flex items-start justify-between">
        {icon ? (
          <div className={cn('flex h-10 w-10 items-center justify-center rounded-xl shadow-sm', iconBg, 'bg-white/40 dark:bg-black/20')}>
            <span className="text-light-primary-text dark:text-zinc-200">{icon}</span>
          </div>
        ) : <div />}

        {hasTrend ? (
          <div className={cn(
            'flex items-center gap-1 rounded-full px-2 py-1',
            'bg-white/60 dark:bg-zinc-800/90',
          )}>
            <span className={cn('text-[11px] font-bold tabular-nums', trendUp ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')}>
              {trendPct}
            </span>
            <span className={trendUp ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}>
              {trendUp ? <TrendUpGlyph /> : <TrendDownGlyph />}
            </span>
          </div>
        ) : (
          <div className="flex h-6 items-center rounded-full bg-white/40 px-2 dark:bg-zinc-800/50">
            <span className="text-[11px] font-medium text-light-secondary-text dark:text-zinc-500">—</span>
          </div>
        )}
      </div>

      {/* Bottom: value + label */}
      <div className="relative">
        <h3 className="font-urbanist text-[2rem] font-bold leading-none tracking-tight text-light-primary-text dark:text-zinc-100">
          {value}
        </h3>
        <p className="mt-1.5 text-sm font-medium text-light-secondary-text dark:text-zinc-400">{label}</p>
      </div>
    </div>
  );

  if (href) {
    return (
      <Link
        href={href}
        className="block h-full rounded-2xl outline-none transition-all duration-200 hover:scale-[1.015] hover:shadow-md focus-visible:ring-2 focus-visible:ring-brand-500/35 focus-visible:ring-offset-2"
      >
        {inner}
      </Link>
    );
  }
  return inner;
}

export function PastelStatGrid({ children }: { children: ReactNode }) {
  return <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">{children}</div>;
}

export type OrderStatusSlice = { name: string; value: number; color: string };

function CustomTooltip({ active, payload }: { active?: boolean; payload?: { name: string; value: number; payload: OrderStatusSlice }[] }) {
  if (!active || !payload?.length) return null;
  const item = payload[0];
  return (
    <div className="rounded-xl border border-white/80 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
      <div className="flex items-center gap-2">
        <span className="size-2.5 rounded-full shrink-0" style={{ backgroundColor: item.payload.color }} />
        <span className="text-xs font-medium text-slate-700 dark:text-zinc-200">{item.name}</span>
      </div>
      <p className="mt-0.5 text-sm font-bold text-slate-900 dark:text-white">{item.value}</p>
    </div>
  );
}

export function OrderStatusCard({
  title,
  subtitle,
  data,
  totalLabel,
}: {
  title: string;
  subtitle?: string;
  data: OrderStatusSlice[];
  totalLabel?: string;
}) {
  const sum = data.reduce((s, d) => s + d.value, 0);
  const chartData =
    sum > 0
      ? data.filter((d) => d.value > 0)
      : [{ name: 'Henüz veri yok', value: 1, color: '#e2e8f0' }];

  const presentItem = data.find((d) => d.name === 'Bugün geldi');
  const rate = sum > 0 && presentItem ? Math.round((presentItem.value / sum) * 100) : null;

  return (
    <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/[0.04] dark:bg-zinc-900 dark:ring-white/10 h-full flex flex-col">
      <div className="mb-5 flex items-start justify-between gap-3">
        <div>
          <h3 className="text-base font-bold text-slate-900 dark:text-white">{title}</h3>
          {subtitle ? <p className="mt-0.5 text-sm text-slate-500 dark:text-zinc-400">{subtitle}</p> : null}
        </div>
        {rate !== null && (
          <div className="shrink-0 rounded-xl bg-brand-50 px-3 py-1.5 dark:bg-brand-900/30">
            <span className="text-sm font-bold text-brand-700 dark:text-brand-300">{rate}%</span>
            <span className="ml-1 text-xs text-brand-600/70 dark:text-brand-400/70">katılım</span>
          </div>
        )}
      </div>

      <div className="flex flex-col items-stretch gap-6 flex-1 lg:flex-row lg:items-center">
        {/* Legend */}
        <ul className="flex min-w-0 flex-1 flex-col justify-center gap-3 lg:max-w-[220px]">
          {(sum > 0 ? data : chartData).map((row) => {
            const pct = sum > 0 ? Math.round((row.value / sum) * 100) : 0;
            return (
              <li key={row.name} className="flex flex-col gap-1.5">
                <div className="flex items-center justify-between gap-3 text-sm">
                  <span className="flex min-w-0 items-center gap-2.5">
                    <span className="size-2.5 shrink-0 rounded-full" style={{ backgroundColor: row.color }} />
                    <span className="truncate font-medium text-slate-700 dark:text-zinc-200">{row.name}</span>
                  </span>
                  <span className="shrink-0 tabular-nums font-semibold text-slate-900 dark:text-white">
                    {sum > 0 ? row.value : '—'}
                  </span>
                </div>
                {sum > 0 && (
                  <div className="ml-5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-zinc-800">
                    <div
                      className="h-full rounded-full transition-all duration-500"
                      style={{ width: `${pct}%`, backgroundColor: row.color }}
                    />
                  </div>
                )}
              </li>
            );
          })}
        </ul>

        {/* Donut chart */}
        <div className="relative mx-auto h-[200px] w-full max-w-[220px] lg:mx-0 lg:flex-shrink-0">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={chartData}
                dataKey="value"
                nameKey="name"
                cx="50%"
                cy="50%"
                innerRadius={58}
                outerRadius={90}
                paddingAngle={2}
                strokeWidth={0}
              >
                {chartData.map((entry) => (
                  <Cell key={entry.name} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip content={<CustomTooltip />} />
            </PieChart>
          </ResponsiveContainer>
          {/* Center label */}
          {sum > 0 && (
            <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
              <span className="font-urbanist text-2xl font-bold text-slate-900 dark:text-white">{sum}</span>
              <span className="text-xs font-medium text-slate-500 dark:text-zinc-400">{totalLabel ?? 'toplam'}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function MiniSparkline({ points, positive }: { points: number[]; positive: boolean }) {
  const w = 80;
  const h = 28;
  const pad = 2;
  const max = Math.max(...points);
  const min = Math.min(...points);
  const range = max - min || 1;
  const coords = points.map((v, i) => {
    const x = pad + (i / Math.max(points.length - 1, 1)) * (w - pad * 2);
    const y = pad + (1 - (v - min) / range) * (h - pad * 2);
    return `${x},${y}`;
  });
  return (
    <svg width={w} height={h} className="shrink-0 overflow-visible" aria-hidden>
      <polyline
        fill="none"
        stroke={positive ? '#10b981' : '#ef4444'}
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        points={coords.join(' ')}
      />
    </svg>
  );
}

export type SparkRow = {
  id: string;
  flag: ReactNode;
  name: string;
  value: string;
  spark: number[];
  positive: boolean;
};

export function TopSparklinesCard({
  title,
  subtitle,
  rows,
}: {
  title: string;
  subtitle?: string;
  rows: SparkRow[];
}) {
  return (
    <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/[0.04] dark:bg-zinc-900 dark:ring-white/10 h-full flex flex-col">
      <div className="mb-5">
        <h3 className="text-base font-bold text-slate-900 dark:text-white">{title}</h3>
        {subtitle ? <p className="mt-0.5 text-sm text-slate-500 dark:text-zinc-400">{subtitle}</p> : null}
      </div>
      <ul className="flex flex-1 flex-col justify-between gap-0">
        {rows.map((row, i) => (
          <li
            key={row.id}
            className={cn(
              'flex items-center gap-3 py-3',
              i < rows.length - 1 && 'border-b border-slate-100 dark:border-zinc-800',
            )}
          >
            <span className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-base leading-none dark:bg-zinc-800">
              {row.flag}
            </span>
            <span className="min-w-0 flex-1">
              <span className="block truncate text-sm font-medium text-slate-800 dark:text-zinc-200">{row.name}</span>
              <span className="block text-xs text-slate-400 dark:text-zinc-500 mt-0.5">bu hafta</span>
            </span>
            <MiniSparkline points={row.spark} positive={row.positive} />
            <span className="w-14 shrink-0 text-right text-sm font-bold tabular-nums text-slate-900 dark:text-white">
              {row.value}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}