import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';

const data = [
  { name: 'Mo', placement: 4, expert: 10 },
  { name: 'Di', placement: 3, expert: 12 },
  { name: 'Mi', placement: 6, expert: 15 },
  { name: 'Do', placement: 8, expert: 10 },
  { name: 'Fr', placement: 5, expert: 8 },
];

export const Dashboard: React.FC = () => {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {[
          { label: 'Aktive Ausschreibungen', value: '12', trend: '+12%', color: 'blue' },
          { label: 'Gesamt Experten', value: '1.450', trend: '+5%', color: 'green' },
          { label: 'Laufende Projekte', value: '34', trend: '+2', color: 'purple' },
          { label: 'Abschlussrate', value: '78%', trend: '+4%', color: 'orange' },
        ].map((stat) => (
          <div key={stat.label} className="bg-white dark:bg-slate-900 p-6 rounded-3xl shadow-card border border-slate-200 dark:border-slate-800 transition-all hover:shadow-lg hover:-translate-y-1">
            <p className="text-slate-500 text-sm font-semibold tracking-wide">{stat.label}</p>
            <div className="flex items-baseline gap-3 mt-2">
              <h3 className="text-3xl font-extrabold text-slate-900 dark:text-white">{stat.value}</h3>
              <span className="text-xs font-bold text-brand-600 px-2 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">{stat.trend}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card h-[450px] flex flex-col overflow-hidden">
          <h3 className="text-lg font-bold mb-6 shrink-0 flex items-center gap-2">
            <span className="w-1.5 h-6 bg-brand-500 rounded-full"></span>
            Placements vs. Experten-Anfragen
          </h3>
          <div className="flex-1 w-full overflow-hidden">
            <ResponsiveContainer width="100%" height="100%" minHeight={300}>
              <BarChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
                <YAxis axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
                <Tooltip 
                  contentStyle={{ backgroundColor: '#0f172a', border: 'none', borderRadius: '12px', color: '#fff', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
                  itemStyle={{ color: '#fff' }}
                />
                <Bar dataKey="placement" fill="#22c55e" radius={[6, 6, 0, 0]} barSize={24} />
                <Bar dataKey="expert" fill="#3b82f6" radius={[6, 6, 0, 0]} barSize={24} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card h-[450px] flex flex-col overflow-hidden">
          <h3 className="text-lg font-bold mb-6 shrink-0 flex items-center gap-2">
            <span className="w-1.5 h-6 bg-blue-500 rounded-full"></span>
            Umsatzprognose
          </h3>
          <div className="flex-1 w-full overflow-hidden">
            <ResponsiveContainer width="100%" height="100%" minHeight={300}>
              <AreaChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <defs>
                  <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#22c55e" stopOpacity={0.2}/>
                    <stop offset="95%" stopColor="#22c55e" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
                <YAxis axisLine={false} tickLine={false} hide />
                <Tooltip />
                <Area type="monotone" dataKey="placement" stroke="#22c55e" strokeWidth={3} fillOpacity={1} fill="url(#colorPv)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card">
        <h3 className="text-lg font-bold mb-6">Letzte Aktivitäten</h3>
        <div className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center justify-between p-5 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 hover:border-brand-500/30 transition-all">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
                  <svg className="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                </div>
                <div>
                  <p className="font-bold text-slate-800 dark:text-slate-100">Neuer Experte registriert</p>
                  <p className="text-xs text-slate-500 font-medium">Mila Superstar • Vor 10 Minuten</p>
                </div>
              </div>
              <button className="px-4 py-2 text-xs font-bold text-brand-600 bg-brand-50 dark:bg-brand-500/10 rounded-lg hover:bg-brand-100 transition-all">Ansehen</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};