import React from 'react';
import {
  Newspaper,
  TrendingUp,
  Eye,
  Clock,
  AlertCircle,
  ChevronRight,
  Edit3,
  Trash2,
} from 'lucide-react';
import { AdminHeaderPage } from '@/app/components/layout/admin/header';
import { AdminSideBar } from '@/app/components/layout/admin/sidebar';

const DashboardMain = () => {
  return (
    <div className="flex h-screen bg-[#F1F5F9] text-slate-900 font-sans">
      <AdminSideBar />

      <main className="flex-1 overflow-y-auto flex flex-col min-h-0">
        <AdminHeaderPage />

        <div className="p-8 space-y-8 flex-1">
          <div className="grid grid-cols-4 gap-6">
            <StatCard
              label="Artigos Publicados"
              value="14,352"
              trend="+12% este mês"
              icon={<Newspaper size={20} className="text-blue-600" />}
            />
            <StatCard
              label="Visualizações Totais"
              value="2.1M"
              trend="+5.4% vs ontem"
              icon={<TrendingUp size={20} className="text-emerald-600" />}
            />
            <StatCard
              label="Tempo Médio"
              value="4m 32s"
              trend="-2s média"
              icon={<Clock size={20} className="text-orange-600" />}
            />
            <StatCard
              label="Alertas Ativos"
              value="3"
              trend="Urgente"
              icon={<AlertCircle size={20} className="text-red-600" />}
              isAlert
            />
          </div>

          <div className="grid grid-cols-3 gap-8">
            <div className="col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-6 border-b border-slate-100 flex justify-between items-center">
                <h3 className="font-bold text-slate-800 text-sm uppercase tracking-wider">
                  Artigos Recentes
                </h3>
                <button className="text-blue-600 text-xs font-bold flex items-center gap-1 hover:underline">
                  Ver Todos <ChevronRight size={14} />
                </button>
              </div>
              <table className="w-full text-left border-collapse">
                <thead className="bg-slate-50 text-[10px] uppercase font-bold text-slate-400">
                  <tr>
                    <th className="px-6 py-3">Título</th>
                    <th className="px-6 py-3">Estado</th>
                    <th className="px-6 py-3">Autor</th>
                    <th className="px-6 py-3">Visualizações</th>
                    <th className="px-6 py-3">Ações</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-50">
                  <TableRow
                    title="Volatilidade do Mercado: Impactos na Economia"
                    status="Publicado"
                    author="James Wilson"
                    views="1.2M"
                  />
                  <TableRow
                    title="O Futuro da Inteligência Artificial em 2026"
                    status="Rascunho"
                    author="Sarah Johnson"
                    views="--"
                  />
                  <TableRow
                    title="Novas Políticas de Sustentabilidade na UE"
                    status="Agendado"
                    author="Ricardo Silva"
                    views="0"
                  />
                </tbody>
              </table>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
              <h3 className="font-bold text-slate-800 text-sm uppercase tracking-wider mb-6">
                Performance de Conteúdo
              </h3>
              <div className="space-y-6">
                <CategoryBar label="Tecnologia" percentage={85} color="bg-blue-500" />
                <CategoryBar label="Negócios" percentage={62} color="bg-emerald-500" />
                <CategoryBar label="Política" percentage={45} color="bg-purple-500" />
                <CategoryBar label="Desporto" percentage={30} color="bg-orange-500" />
              </div>

              <div className="mt-8 p-4 bg-slate-50 rounded-xl">
                <p className="text-[11px] text-slate-500 text-center">
                  O tráfego orgânico cresceu <strong>15%</strong> nos últimos 7 dias.
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

const StatCard = ({
  label,
  value,
  trend,
  icon,
  isAlert = false,
}: {
  label: string;
  value: string;
  trend: string;
  icon: React.ReactNode;
  isAlert?: boolean;
}) => (
  <div
    className={`p-5 rounded-2xl border bg-white shadow-sm transition-transform hover:scale-[1.02] cursor-default ${
      isAlert ? 'border-red-100 bg-red-50/20' : 'border-slate-200'
    }`}
  >
    <div className="flex justify-between items-start mb-4">
      <div className={`p-2 rounded-lg ${isAlert ? 'bg-red-100' : 'bg-slate-50'}`}>{icon}</div>
      <span
        className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
          isAlert ? 'bg-red-500 text-white' : 'bg-emerald-50 text-emerald-600'
        }`}
      >
        {trend}
      </span>
    </div>
    <p className="text-xs text-slate-500 font-medium">{label}</p>
    <h3 className="text-2xl font-bold tracking-tight">{value}</h3>
  </div>
);

const TableRow = ({
  title,
  status,
  author,
  views,
}: {
  title: string;
  status: string;
  author: string;
  views: string;
}) => (
  <tr className="hover:bg-slate-50/50 transition-colors group">
    <td className="px-6 py-4">
      <p className="text-sm font-semibold text-slate-800 truncate max-w-[200px]">{title}</p>
    </td>
    <td className="px-6 py-4">
      <span
        className={`text-[10px] font-bold px-2 py-1 rounded-md ${
          status === 'Publicado'
            ? 'bg-emerald-50 text-emerald-600'
            : status === 'Rascunho'
              ? 'bg-slate-100 text-slate-500'
              : 'bg-blue-50 text-blue-600'
        }`}
      >
        {status}
      </span>
    </td>
    <td className="px-6 py-4 text-xs text-slate-600">{author}</td>
    <td className="px-6 py-4 text-xs font-mono font-medium">{views}</td>
    <td className="px-6 py-4">
      <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
        <button className="p-1.5 hover:bg-white rounded-md border border-slate-200 text-slate-400 hover:text-blue-600 shadow-sm">
          <Edit3 size={14} />
        </button>
        <button className="p-1.5 hover:bg-white rounded-md border border-slate-200 text-slate-400 hover:text-red-600 shadow-sm">
          <Trash2 size={14} />
        </button>
      </div>
    </td>
  </tr>
);

const CategoryBar = ({
  label,
  percentage,
  color,
}: {
  label: string;
  percentage: number;
  color: string;
}) => (
  <div className="space-y-2">
    <div className="flex justify-between text-[11px] font-bold uppercase tracking-wide">
      <span>{label}</span>
      <span className="text-slate-400">{percentage}%</span>
    </div>
    <div className="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
      <div className={`h-full ${color} rounded-full`} style={{ width: `${percentage}%` }} />
    </div>
  </div>
);

export default DashboardMain;