"use client";

import { features, type Feature } from "@/data/features";
import { Card, CardContent } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const statusColors: Record<string, string> = {
  "Planned":     "bg-gray-100 text-gray-700",
  "In Progress": "bg-yellow-100 text-yellow-800",
  "In Review":   "bg-blue-100 text-blue-800",
  "Deployed":    "bg-green-100 text-green-800",
};

const statusCounts = (list: Feature[]) => ({
  total:      list.length,
  planned:    list.filter((f) => f.status === "Planned").length,
  inProgress: list.filter((f) => f.status === "In Progress").length,
  inReview:   list.filter((f) => f.status === "In Review").length,
  deployed:   list.filter((f) => f.status === "Deployed").length,
});

export function ModulesTab() {
  const counts = statusCounts(features);

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">Modulübersicht</h2>

      {/* Summary bar */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {[
          { label: "In Progress", value: counts.inProgress, color: "bg-yellow-100 text-yellow-800" },
          { label: "In Review",   value: counts.inReview,   color: "bg-blue-100 text-blue-800" },
          { label: "Deployed",    value: counts.deployed,   color: "bg-green-100 text-green-800" },
          { label: "Geplant",     value: counts.planned,    color: "bg-gray-100 text-gray-700" },
        ].map((s) => (
          <Card key={s.label}>
            <CardContent className="p-4 flex items-center justify-between">
              <span className="text-sm text-muted-foreground">{s.label}</span>
              <span className={`text-lg font-bold px-2 py-0.5 rounded ${s.color}`}>
                {s.value}
              </span>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Table */}
      <Card>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-20">ID</TableHead>
              <TableHead>Feature</TableHead>
              <TableHead className="w-32">Status</TableHead>
              <TableHead className="w-24 text-center">Frontend</TableHead>
              <TableHead className="w-24 text-center">Backend</TableHead>
              <TableHead className="w-32">Aktualisiert</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {features.map((f) => (
              <TableRow key={f.id}>
                <TableCell className="font-mono text-xs text-muted-foreground">
                  {f.id}
                </TableCell>
                <TableCell className="font-medium">{f.name}</TableCell>
                <TableCell>
                  <span className={`text-xs font-medium px-2 py-1 rounded-full ${statusColors[f.status]}`}>
                    {f.status}
                  </span>
                </TableCell>
                <TableCell className="text-center">
                  {f.frontend
                    ? <span className="text-green-600 font-bold">✓</span>
                    : <span className="text-muted-foreground">–</span>
                  }
                </TableCell>
                <TableCell className="text-center">
                  {f.backend
                    ? <span className="text-green-600 font-bold">✓</span>
                    : <span className="text-muted-foreground">–</span>
                  }
                </TableCell>
                <TableCell className="text-sm text-muted-foreground">
                  {f.lastUpdated}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}
