import { Card, CardContent, CardHeader, Chip } from '@heroui/react';
import { Wrench, Activity, Clock, Server, Terminal } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';
import { formatDate } from '../utils/formatters';

export function Admin() {
  const { user, admin } = useApp();

  if (!user?.isAdmin) return null;

  return (
    <SectionCard title="Admin" subtitle="Bot-weite Übersichten">
      <div className="grid gap-5 xl:grid-cols-2">
        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Bot Overview</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-3 p-5">
            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
              <div className="flex items-center gap-2">
                <Server size={14} className="text-primary-400" />
                <span className="text-default-500">Guilds</span>
              </div>
              <span className="font-semibold">{admin.overview?.guilds ?? '-'}</span>
            </div>
            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
              <div className="flex items-center gap-2">
                <Activity size={14} className="text-success-400" />
                <span className="text-default-500">Aktive Guilds (24h)</span>
              </div>
              <span className="font-semibold">{admin.overview?.activeGuilds ?? '-'}</span>
            </div>
            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
              <div className="flex items-center gap-2">
                <Clock size={14} className="text-warning-400" />
                <span className="text-default-500">Uptime</span>
              </div>
              <span className="font-semibold">{admin.overview?.uptime ?? '-'}</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Letzte Admin Logs</h3>
            <Chip size="sm" variant="flat" color="warning">
              {(admin.logs || []).length} Einträge
            </Chip>
          </CardHeader>
          <CardContent className="flex flex-col gap-2 p-5">
            {(admin.logs || []).length ? (admin.logs || []).slice(0, 20).map((log, i) => (
              <div key={i} className="flex items-start gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
                <Terminal size={14} className="mt-0.5 text-default-400 shrink-0" />
                <div className="min-w-0">
                  <p className="text-default-500">{log.message || '-'}</p>
                  <p className="text-tiny text-default-400 mt-0.5">{formatDate(log.timestamp)}</p>
                </div>
              </div>
            )) : (
              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
                <Terminal size={20} />
                Keine Logs
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}
