'use client';

import { useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend,
} from 'recharts';

interface GrowthReport {
  monthlyGrowth: { month: string; count: number }[];
  planDistribution: { plan: string; count: number }[];
  statusDistribution: { status: string; count: number }[];
  topTenants: { name: string; slug: string; plan: string; studentCount: number }[];
}

const PLAN_COLORS: Record<string, string> = {
  TRIAL: '#f59e0b',
  STARTER: '#6366f1',
  GROWTH: '#10b981',
  ENTERPRISE: '#8b5cf6',
};

const PLAN_LABELS: Record<string, string> = {
  TRIAL: 'Trial',
  STARTER: 'Starter',
  GROWTH: 'Growth',
  ENTERPRISE: 'Enterprise',
};

const STATUS_COLORS: Record<string, string> = {
  TRIAL: '#f59e0b',
  ACTIVE: '#10b981',
  SUSPENDED: '#ef4444',
  CANCELLED: '#94a3b8',
};

const STATUS_LABELS: Record<string, string> = {
  TRIAL: 'Deneme',
  ACTIVE: 'Aktif',
  SUSPENDED: 'Askıda',
  CANCELLED: 'İptal',
};

const PLAN_BADGE: Record<string, string> = {
  TRIAL: 'bg-amber-100 text-amber-700',
  STARTER: 'bg-indigo-100 text-indigo-700',
  GROWTH: 'bg-emerald-100 text-emerald-700',
  ENTERPRISE: 'bg-violet-100 text-violet-700',
};

function formatMonth(m: string) {
  const [year, month] = m.split('-');
  const names = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];
  return `${names[parseInt(month) - 1]} ${year.slice(2)}`;
}

export default function ReportsPage() {
  const [data, setData] = useState<GrowthReport | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiFetchJson<GrowthReport>('/v1/platform/reports/growth').then((res) => {
      if (res.error === null && res.data) setData(res.data);
      setLoading(false);
    });
  }, []);

  const totalTenants = data ? data.planDistribution.reduce((s, p) => s + p.count, 0) : 0;

  return (
    <div className="space-y-8">
      {/* Page header */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 px-8 py-10 text-white shadow-xl">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-16 -right-16 h-56 w-56 rounded-full bg-blue-500/10 blur-3xl" />
          <div className="absolute -bottom-8 -left-8 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl" />
        </div>
        <div className="relative flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 text-blue-300 text-sm font-medium mb-2">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              Analiz & Raporlar
            </div>
            <h1 className="text-3xl font-bold tracking-tight">Büyüme Raporu</h1>
            <p className="mt-1.5 text-slate-300">Platform geneli büyüme ve analiz istatistikleri.</p>
          </div>
          {!loading && data && (
            <div className="text-right">
              <div className="text-3xl font-bold">{totalTenants}</div>
              <div className="text-sm text-slate-400">Toplam okul</div>
            </div>
          )}
        </div>
      </div>

      {/* Monthly growth chart */}
      <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <div className="flex items-center justify-between mb-5">
          <div>
            <h3 className="text-base font-semibold text-slate-900">Aylık Okul Kaydı</h3>
            <p className="text-sm text-slate-500 mt-0.5">Son 12 ay boyunca platforma katılan okul sayısı</p>
          </div>
        </div>
        {loading ? (
          <div className="h-56 rounded-xl bg-slate-100 animate-pulse" />
        ) : (
          <ResponsiveContainer width="100%" height={220}>
            <LineChart
              data={data?.monthlyGrowth.map((d) => ({ ...d, month: formatMonth(d.month) })) ?? []}
              margin={{ top: 5, right: 10, left: 0, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
              <XAxis dataKey="month" tick={{ fontSize: 11, fill: '#94a3b8' }} axisLine={false} tickLine={false} />
              <YAxis tick={{ fontSize: 11, fill: '#94a3b8' }} axisLine={false} tickLine={false} allowDecimals={false} />
              <Tooltip
                contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                formatter={(v: number) => [v, 'Okul']}
              />
              <Line
                type="monotone"
                dataKey="count"
                stroke="#6366f1"
                strokeWidth={2.5}
                dot={{ fill: '#6366f1', r: 4, strokeWidth: 0 }}
                activeDot={{ r: 6, strokeWidth: 0 }}
              />
            </LineChart>
          </ResponsiveContainer>
        )}
      </div>

      {/* Distribution charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Plan distribution */}
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h3 className="text-base font-semibold text-slate-900 mb-1">Plan Dağılımı</h3>
          <p className="text-sm text-slate-500 mb-5">Okulların planlara göre dağılımı</p>
          {loading ? (
            <div className="h-48 rounded-xl bg-slate-100 animate-pulse" />
          ) : (
            <div className="flex items-center gap-6">
              <ResponsiveContainer width={160} height={160}>
                <PieChart>
                  <Pie
                    data={data?.planDistribution ?? []}
                    dataKey="count"
                    nameKey="plan"
                    cx="50%"
                    cy="50%"
                    innerRadius={45}
                    outerRadius={70}
                    paddingAngle={3}
                  >
                    {(data?.planDistribution ?? []).map((entry) => (
                      <Cell key={entry.plan} fill={PLAN_COLORS[entry.plan] ?? '#94a3b8'} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(v: number, name: string) => [v, PLAN_LABELS[name] ?? name]} />
                </PieChart>
              </ResponsiveContainer>
              <div className="flex-1 space-y-2.5">
                {(data?.planDistribution ?? []).map((p) => (
                  <div key={p.plan} className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="h-3 w-3 rounded-full shrink-0" style={{ backgroundColor: PLAN_COLORS[p.plan] ?? '#94a3b8' }} />
                      <span className="text-sm text-slate-700">{PLAN_LABELS[p.plan] ?? p.plan}</span>
                    </div>
                    <div className="text-right">
                      <span className="text-sm font-semibold text-slate-900">{p.count}</span>
                      <span className="text-xs text-slate-400 ml-1">
                        ({totalTenants > 0 ? Math.round((p.count / totalTenants) * 100) : 0}%)
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Status distribution */}
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h3 className="text-base font-semibold text-slate-900 mb-1">Abonelik Durumu</h3>
          <p className="text-sm text-slate-500 mb-5">Aboneliklerin durum dağılımı</p>
          {loading ? (
            <div className="h-48 rounded-xl bg-slate-100 animate-pulse" />
          ) : (
            <div className="flex items-center gap-6">
              <ResponsiveContainer width={160} height={160}>
                <PieChart>
                  <Pie
                    data={data?.statusDistribution ?? []}
                    dataKey="count"
                    nameKey="status"
                    cx="50%"
                    cy="50%"
                    innerRadius={45}
                    outerRadius={70}
                    paddingAngle={3}
                  >
                    {(data?.statusDistribution ?? []).map((entry) => (
                      <Cell key={entry.status} fill={STATUS_COLORS[entry.status] ?? '#94a3b8'} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(v: number, name: string) => [v, STATUS_LABELS[name] ?? name]} />
                </PieChart>
              </ResponsiveContainer>
              <div className="flex-1 space-y-2.5">
                {(data?.statusDistribution ?? []).map((s) => {
                  const total = data?.statusDistribution.reduce((acc, x) => acc + x.count, 0) ?? 0;
                  return (
                    <div key={s.status} className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[s.status] ?? '#94a3b8' }} />
                        <span className="text-sm text-slate-700">{STATUS_LABELS[s.status] ?? s.status}</span>
                      </div>
                      <div className="text-right">
                        <span className="text-sm font-semibold text-slate-900">{s.count}</span>
                        <span className="text-xs text-slate-400 ml-1">
                          ({total > 0 ? Math.round((s.count / total) * 100) : 0}%)
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Top tenants */}
      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div className="px-6 py-5 border-b border-slate-100">
          <h3 className="text-base font-semibold text-slate-900">En Aktif Okullar</h3>
          <p className="text-sm text-slate-500 mt-0.5">Öğrenci sayısına göre ilk 10 okul</p>
        </div>
        {loading ? (
          <div className="p-6 space-y-3">
            {Array.from({ length: 5 }).map((_, i) => <div key={i} className="h-12 rounded-xl bg-slate-100 animate-pulse" />)}
          </div>
        ) : (
          <div className="divide-y divide-slate-100">
            {(data?.topTenants ?? []).map((tenant, i) => {
              const max = data?.topTenants[0]?.studentCount ?? 1;
              const pct = max > 0 ? Math.round((tenant.studentCount / max) * 100) : 0;
              return (
                <div key={tenant.slug} className="px-6 py-4 hover:bg-slate-50/60 transition-colors">
                  <div className="flex items-center gap-4">
                    <div className="w-7 text-center text-sm font-bold text-slate-400">#{i + 1}</div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1.5">
                        <span className="font-medium text-slate-900 truncate">{tenant.name}</span>
                        <span className="text-xs text-slate-400 font-mono">{tenant.slug}</span>
                        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${PLAN_BADGE[tenant.plan] ?? 'bg-slate-100 text-slate-600'}`}>
                          {PLAN_LABELS[tenant.plan] ?? tenant.plan}
                        </span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="flex-1 h-2 rounded-full bg-slate-100 overflow-hidden">
                          <div
                            className="h-full rounded-full bg-indigo-500 transition-all"
                            style={{ width: `${pct}%` }}
                          />
                        </div>
                        <span className="text-sm font-semibold text-slate-700 w-20 text-right shrink-0">
                          {tenant.studentCount} öğrenci
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
            {!data?.topTenants.length && (
              <div className="py-12 text-center text-sm text-slate-400">Veri bulunamadı</div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}