import { Card, CardContent, Switch } from '@heroui/react';
import { Puzzle, CheckCircle, XCircle } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';

export function ModulesPage() {
  const { modules, toggleModule } = useApp();

  const activeModules = modules.filter((m) => m.enabled);
  const inactiveModules = modules.filter((m) => !m.enabled);

  return (
    <SectionCard title="Module" subtitle="Module direkt umschalten">
      <div className="space-y-5">
        {activeModules.length > 0 && (
          <div>
            <h3 className="mb-3 flex items-center gap-2 text-base font-semibold">
              <CheckCircle size={16} className="text-success-400" />
              Aktive Module ({activeModules.length})
            </h3>
            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
              {activeModules.map((module) => (
                <Card key={module.key} className="border border-success-100/30 bg-success-50/5">
                  <CardContent className="flex flex-row items-center justify-between gap-4 p-4">
                    <div className="min-w-0">
                      <div className="font-semibold">{module.name}</div>
                      {module.description && (
                        <div className="text-small text-default-400 truncate">{module.description}</div>
                      )}
                    </div>
                    <Switch isSelected={module.enabled} onChange={(v) => toggleModule(module.key, v)} />
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

        {inactiveModules.length > 0 && (
          <div>
            <h3 className="mb-3 flex items-center gap-2 text-base font-semibold">
              <XCircle size={16} className="text-default-400" />
              Deaktivierte Module ({inactiveModules.length})
            </h3>
            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
              {inactiveModules.map((module) => (
                <Card key={module.key} className="border border-default-100 bg-default-50/20 opacity-70">
                  <CardContent className="flex flex-row items-center justify-between gap-4 p-4">
                    <div className="min-w-0">
                      <div className="font-semibold">{module.name}</div>
                      {module.description && (
                        <div className="text-small text-default-400 truncate">{module.description}</div>
                      )}
                    </div>
                    <Switch isSelected={module.enabled} onChange={(v) => toggleModule(module.key, v)} />
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

        {modules.length === 0 && (
          <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
            <Puzzle size={24} />
            Keine Module verf�gbar
          </div>
        )}
      </div>
    </SectionCard>
  );
}
