import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Plus, X, Folder, FolderOpen, Search, Trash2, Clock, GitGraph, GitBranch, FileText } from "lucide-react";
import Image from "next/image";

export function RepoManager({
  repos,
  onAdd,
  onRemove,
}: {
  repos: { path: string; name: string }[];
  onAdd: (repo: { path: string; name: string }) => void;
  onRemove: (path: string) => void;
}) {
  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
        <GitBranch className="w-5 h-5 text-primary" />
        Dépôts Git
      </h3>
      <div className="space-y-3">
        {repos.map((repo) => (
          <div
            key={repo.path}
            className="flex items-center justify-between p-3 bg-muted/50 rounded-md border border-border"
          >
            <div className="flex items-center gap-3">
              <Folder className="w-4 h-4 text-primary" />
              <div>
                <p className="font-medium text-sm">{repo.name}</p>
                <p className="text-xs text-muted-foreground truncate max-w-[200px]">{repo.path}</p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="sm"
              className="text-destructive hover:text-destructive"
              onClick={() => onRemove(repo.path)}
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        ))}
        <Button
          variant="outline"
          className="w-full border-dashed"
        >
          <Plus className="w-4 h-4 mr-2" />
          Ajouter un dépôt
        </Button>
      </div>
    </Card>
  );
}

export function StatsOverview({ stats }: { stats: any }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <StatCard
        title="Commits"
        value={stats.totalCommits}
        format="number"
        icon={<GitGraph className="w-5 h-5 text-primary" />}
        color="blue"
      />
      <StatCard
        title="Lignes ajoutées"
        value={stats.totalLinesAdded}
        format="number"
        icon={<Plus className="w-5 h-5 text-green-500" />}
        color="green"
      />
      <StatCard
        title="Lignes supprimées"
        value={stats.totalLinesDeleted}
        format="number"
        icon={<X className="w-5 h-5 text-red-500" />}
        color="red"
      />
      <StatCard
        title="Jours actifs"
        value={stats.activeDays}
        format="number"
        icon={<Clock className="w-5 h-5 text-yellow-500" />}
        color="yellow"
      />
    </div>
  );
}

function StatCard({
  title,
  value,
  icon,
  color,
  format,
}: {
  title: string;
  value: number | string;
  icon: React.ReactNode;
  color: string;
  format: "number" | "percent";
}) {
  const colorMap: Record<string, string> = {
    blue: "bg-blue-50 text-blue-600 border-blue-200",
    green: "bg-green-50 text-green-600 border-green-200",
    red: "bg-red-50 text-red-600 border-red-200",
    yellow: "bg-yellow-50 text-yellow-600 border-yellow-200",
  };

  const displayed = format === "number" 
    ? Number(value).toLocaleString("fr-FR")
    : `${value}%`;

  return (
    <Card className={`p-4 border-l-4 ${colorMap[color].split(" ").slice(2).join(" ")}`}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-muted-foreground">{title}</p>
          <p className="text-2xl font-bold mt-1">{displayed}</p>
        </div>
        <div className={`p-2 rounded-lg ${colorMap[color]}`}>
          {icon}
        </div>
      </div>
    </Card>
  );
}

export function CommitHistory({ commits }: { commits: any[] }) {
  return (
    <div className="space-y-3">
      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
        <FileText className="w-5 h-5 text-primary" />
        Historique des commits (derniers 10)
      </h3>
      <div className="space-y-2">
        {commits.slice(0, 10).map((commit, idx) => (
          <div
            key={commit.hash}
            className="flex items-center gap-3 p-3 bg-card rounded-md border border-border hover:bg-muted/50 transition-colors"
          >
            <div className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium truncate">{commit.msg}</p>
              <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
                <span>{commit.author}</span>
                <span>•</span>
                <span>{commit.date}</span>
                <span>•</span>
                <span>+{commit.add} -{commit.del}</span>
              </div>
            </div>
            <span className="text-xs text-muted-foreground flex-shrink-0">
              {commit.hash.substring(0, 7)}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
