import React from 'react';
import { useApp } from '../store/AppContext';
import Card from '../components/ui/Card';
import Button from '../components/ui/Button';
import Tag from '../components/ui/Tag';

const Dashboard = () => {
  const { state } = useApp();
  const { currentUser, weekNumber } = state;

  return (
    <div className="p-6 md:p-10 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <header>
        <h1 className="text-3xl md:text-5xl mb-2">Welkom, {currentUser?.name}</h1>
        <p className="text-fg-muted text-lg">Dit is je overzicht voor week {weekNumber}.</p>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="flex flex-col border border-bg-warm" hoverable>
          <div className="flex justify-between items-start mb-4">
            <div>
              <h3 className="text-xl">Leren</h3>
              <p className="text-fg-muted text-sm mt-1">Jouw onderwerp deze week:</p>
            </div>
            <Tag variant="accent">Te doen</Tag>
          </div>
          <h2 className="text-2xl mt-2 mb-6">De Rol van de Product Owner</h2>
          <Button className="mt-auto">Start Leersessie</Button>
        </Card>

        <Card className="flex flex-col border border-bg-warm" hoverable>
          <div className="flex justify-between items-start mb-4">
            <div>
              <h3 className="text-xl">Testen</h3>
              <p className="text-fg-muted text-sm mt-1">Weektest 10 vragen</p>
            </div>
            <Tag variant="default">Te doen</Tag>
          </div>
          <div className="flex-1 flex items-center justify-center py-6 text-fg-subtle">
            Rond eerst je leersessie af
          </div>
          <Button variant="outline" className="mt-auto" disabled>Start Test</Button>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <h3 className="text-2xl mb-4">Recente Activiteit</h3>
          <Card className="p-0 overflow-hidden border border-bg-warm">
            <div className="divide-y divide-bg-warm">
              {/* Placeholder activity items */}
              <div className="p-4 flex items-center gap-4 hover:bg-bg-warm transition-colors">
                <div className="w-10 h-10 rounded-[var(--r-org)] bg-accent-soft flex items-center justify-center text-purple-700 font-bold">
                  T
                </div>
                <div>
                  <p className="font-medium">Test afgerond: Informatiebeveiliging</p>
                  <p className="text-sm text-fg-muted">Vorige week • Score: 90%</p>
                </div>
                <div className="ml-auto text-teal font-bold">+15 pt</div>
              </div>
              <div className="p-4 flex items-center gap-4 hover:bg-bg-warm transition-colors">
                <div className="w-10 h-10 rounded-[var(--r-org)] bg-sage flex items-center justify-center text-teal-900 font-bold">
                  L
                </div>
                <div>
                  <p className="font-medium">Leersessie: Informatiebeveiliging</p>
                  <p className="text-sm text-fg-muted">Vorige week</p>
                </div>
                <div className="ml-auto text-teal font-bold">+15 pt</div>
              </div>
            </div>
          </Card>
        </div>
        
        <div>
          <h3 className="text-2xl mb-4">Mini Leaderboard</h3>
          <Card className="border border-bg-warm">
            <div className="space-y-4">
              {/* Placeholder leaderboard items */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="font-mono font-bold text-accent">1.</span>
                  <span className="font-medium">Admin</span>
                </div>
                <Tag variant="dark">120 pt</Tag>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="font-mono font-bold text-teal">2.</span>
                  <span className="font-medium">{currentUser?.name}</span>
                </div>
                <Tag variant="default">85 pt</Tag>
              </div>
            </div>
            <Button variant="ghost" className="w-full mt-4 text-sm">Bekijk volledig leaderboard</Button>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;