// src/components/sessions/session-table.tsx
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { cn, formatDuration } from "@/lib/utils";

interface Session {
  id: string;
  agent: string;
  model: string;
  messages: number;
  duration: number;
  status: "active" | "idle" | "completed";
  startedAt: string;
}

interface SessionTableProps {
  sessions: Session[];
}

// Konfigurasi status badge
const statusConfig = {
  active: { label: "Active", color: "bg-green-100 text-green-700 border-green-200" },
  idle: { label: "Idle", color: "bg-amber-100 text-amber-700 border-amber-200" },
  completed: { label: "Done", color: "bg-slate-100 text-slate-500 border-slate-200" },
};

export function SessionTable({ sessions }: SessionTableProps) {
  return (
    <Card className="hover:shadow-md transition-shadow duration-200">
      <CardHeader className="pb-3">
        <CardTitle className="text-base font-semibold text-slate-900">
          📋 Sessions Aktif
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Agent</TableHead>
                <TableHead>Session ID</TableHead>
                <TableHead>Model</TableHead>
                <TableHead className="text-right">Messages</TableHead>
                <TableHead className="text-right">Duration</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sessions.map((session) => {
                const status = statusConfig[session.status];

                return (
                  <TableRow key={session.id}>
                    {/* Agent name */}
                    <TableCell className="font-medium text-sm">
                      {session.agent}
                    </TableCell>
                    {/* Session ID */}
                    <TableCell className="font-mono text-xs text-slate-400">
                      {session.id}
                    </TableCell>
                    {/* Model */}
                    <TableCell>
                      <Badge variant="outline" className="text-xs">
                        {session.model}
                      </Badge>
                    </TableCell>
                    {/* Messages count */}
                    <TableCell className="text-right font-mono text-sm">
                      {session.messages}
                    </TableCell>
                    {/* Duration */}
                    <TableCell className="text-right font-mono text-sm text-slate-500">
                      {formatDuration(session.duration)}
                    </TableCell>
                    {/* Status */}
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={cn("text-xs border", status.color)}
                      >
                        <span className="mr-1">
                          {session.status === "active" && "🟢"}
                          {session.status === "idle" && "🟡"}
                          {session.status === "completed" && "⚪"}
                        </span>
                        {status.label}
                      </Badge>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}

// src/components/sessions/session-chart.tsx
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from "recharts";

interface SessionChartProps {
  data: Array<{ model: string; count: number }>;
}

// Warna beda-beda buat tiap bar
const BAR_COLORS = ["#22c55e", "#3b82f6", "#f59e0b", "#8b5cf6", "#ec4899"];

export function SessionChart({ data }: SessionChartProps) {
  return (
    <Card className="hover:shadow-md transition-shadow duration-200">
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-semibold text-slate-900">
          📊 Distribusi Model
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[280px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={data}
              margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
              <XAxis
                dataKey="model"
                tick={{ fontSize: 11, fill: "#94a3b8" }}
                axisLine={{ stroke: "#e2e8f0" }}
                tickLine={false}
              />
              <YAxis
                tick={{ fontSize: 12, fill: "#94a3b8" }}
                axisLine={false}
                tickLine={false}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: "white",
                  border: "1px solid #e2e8f0",
                  borderRadius: "8px",
                  fontSize: "13px",
                  boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)",
                }}
                formatter={(value: number) => [
                  `${value} sessions`,
                  "Count",
                ]}
              />
              <Bar dataKey="count" radius={[6, 6, 0, 0]}>
                {data.map((_, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={BAR_COLORS[index % BAR_COLORS.length]}
                  />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}

// src/app/sessions/page.tsx
"use client";

import { useState, useEffect, useCallback } from "react";
import { SessionTable } from "@/components/sessions/session-table";
import { SessionChart } from "@/components/sessions/session-chart";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

interface Session {
  id: string;
  agent: string;
  model: string;
  messages: number;
  duration: number;
  status: "active" | "idle" | "completed";
  startedAt: string;
}

interface SessionsData {
  sessions: Session[];
  modelDistribution: Array<{ model: string; count: number }>;
  totalToday: number;
  totalActive: number;
}

const REFRESH_INTERVAL = 30000; // 30 detik

export default function SessionsPage() {
  const [data, setData] = useState<SessionsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [autoRefresh, setAutoRefresh] = useState(true);

  const fetchSessions = useCallback(async () => {
    try {
      const res = await fetch("/api/sessions");
      const json = await res.json();
      setData(json);
    } catch (err) {
      console.error("Gagal fetch sessions:", err);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchSessions();

    if (autoRefresh) {
      const interval = setInterval(fetchSessions, REFRESH_INTERVAL);
      return () => clearInterval(interval);
    }
  }, [autoRefresh, fetchSessions]);

  if (loading || !data) {
    return (
      <div className="space-y-6 animate-pulse">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[...Array(3)].map((_, i) => (
            <div key={i} className="h-24 bg-slate-200 rounded-xl" />
          ))}
        </div>
        <div className="h-80 bg-slate-200 rounded-xl" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Summary cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-5 flex items-center gap-4">
            <div className="p-3 rounded-xl bg-blue-50">
              <span className="text-2xl">💬</span>
            </div>
            <div>
              <p className="text-sm text-slate-500">Total Hari Ini</p>
              <p className="text-2xl font-bold text-slate-900">
                {data.totalToday}
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-5 flex items-center gap-4">
            <div className="p-3 rounded-xl bg-green-50">
              <span className="text-2xl">🟢</span>
            </div>
            <div>
              <p className="text-sm text-slate-500">Aktif Sekarang</p>
              <p className="text-2xl font-bold text-green-600">
                {data.totalActive}
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-5 flex items-center gap-4">
            <div className="p-3 rounded-xl bg-purple-50">
              <span className="text-2xl">🤖</span>
            </div>
            <div>
              <p className="text-sm text-slate-500">Models</p>
              <p className="text-2xl font-bold text-slate-900">
                {data.modelDistribution.length}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Auto-refresh control */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2 text-sm text-slate-500">
          <span className={autoRefresh ? "text-green-500" : "text-slate-400"}>
            {autoRefresh ? "●" : "○"}
          </span>
          <span>
            {autoRefresh
              ? `Auto-refresh aktif (${REFRESH_INTERVAL / 1000} detik)`
              : "Auto-refresh mati"}
          </span>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setAutoRefresh(!autoRefresh)}
          className="gap-2"
        >
          <RefreshCw
            size={14}
            className={autoRefresh ? "animate-spin" : ""}
          />
          {autoRefresh ? "Pause" : "Resume"}
        </Button>
      </div>

      {/* Table + Chart */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <SessionTable sessions={data.sessions} />
        </div>
        <div>
          <SessionChart data={data.modelDistribution} />
        </div>
      </div>
    </div>
  );
}

// src/components/skills/skill-card.tsx
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Zap,
  AlertTriangle,
  CheckCircle2,
  FileText,
  FolderOpen,
  Shield,
  Pencil,
  Sparkles,
  Wrench,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface SkillItem {
  name: string;
  category: string;
  description: string;
  hasSkillMd: boolean;
  hasScriptsDir: boolean;
  hasExecutePermission: boolean;
  issues: string[];
}

interface SkillCardProps {
  skill: SkillItem;
  onEdit: (name: string) => void;
  onOptimize: (name: string) => void;
  onFix: (name: string) => void;
}

// Warna badge per kategori
const categoryColors: Record<string, string> = {
  search: "bg-blue-100 text-blue-700",
  monitoring: "bg-green-100 text-green-700",
  entertainment: "bg-purple-100 text-purple-700",
  communication: "bg-cyan-100 text-cyan-700",
  finance: "bg-amber-100 text-amber-700",
  devops: "bg-red-100 text-red-700",
  automation: "bg-indigo-100 text-indigo-700",
};

export function SkillCard({ skill, onEdit, onOptimize, onFix }: SkillCardProps) {
  const hasIssues = skill.issues.length > 0;
  const allGood = !hasIssues;

  return (
    <Card
      className={cn(
        "hover:shadow-md transition-all duration-200 border",
        hasIssues ? "border-amber-200" : "border-transparent"
      )}
    >
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-2">
            <div
              className={cn(
                "p-2 rounded-lg",
                allGood ? "bg-green-50" : "bg-amber-50"
              )}
            >
              <Zap
                size={18}
                className={allGood ? "text-green-600" : "text-amber-600"}
              />
            </div>
            <div>
              <CardTitle className="text-base font-semibold text-slate-900">
                {skill.name}
              </CardTitle>
              <Badge
                className={cn(
                  "text-[10px] mt-1 border-0",
                  categoryColors[skill.category] || "bg-slate-100 text-slate-600"
                )}
                variant="outline"
              >
                {skill.category}
              </Badge>
            </div>
          </div>
          {/* Status indicator */}
          {allGood ? (
            <CheckCircle2 size={20} className="text-green-500" />
          ) : (
            <AlertTriangle size={20} className="text-amber-500" />
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Deskripsi */}
        <p className="text-sm text-slate-600">{skill.description}</p>

        {/* Checklist */}
        <div className="grid grid-cols-3 gap-2">
          <CheckItem
            label="SKILL.md"
            ok={skill.hasSkillMd}
            icon={FileText}
          />
          <CheckItem
            label="scripts/"
            ok={skill.hasScriptsDir}
            icon={FolderOpen}
          />
          <CheckItem
            label="chmod +x"
            ok={skill.hasExecutePermission}
            icon={Shield}
          />
        </div>

        {/* Issues list */}
        {hasIssues && (
          <div className="space-y-1">
            {skill.issues.map((issue, i) => (
              <div
                key={i}
                className="flex items-start gap-1.5 text-xs text-amber-600"
              >
                <span className="mt-0.5">⚠️</span>
                <span>{issue}</span>
              </div>
            ))}
          </div>
        )}

        {/* Action buttons */}
        <div className="flex gap-2 pt-1">
          <Button
            variant="outline"
            size="sm"
            className="flex-1 gap-1 text-xs"
            onClick={() => onEdit(skill.name)}
          >
            <Pencil size={12} />
            Edit
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="flex-1 gap-1 text-xs"
            onClick={() => onOptimize(skill.name)}
          >
            <Sparkles size={12} />
            AI Fix
          </Button>
          {hasIssues && (
            <Button
              variant="outline"
              size="sm"
              className="gap-1 text-xs text-amber-600 border-amber-200 hover:bg-amber-50"
              onClick={() => onFix(skill.name)}
            >
              <Wrench size={12} />
              Fix
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

/** Checklist item kecil */
function CheckItem({
  label,
  ok,
  icon: Icon,
}: {
  label: string;
  ok: boolean;
  icon: React.ElementType;
}) {
  return (
    <div className="flex items-center gap-1.5 text-xs">
      <Icon
        size={12}
        className={ok ? "text-green-500" : "text-red-400"}
      />
      <span className={ok ? "text-slate-600" : "text-red-500 line-through"}>
        {label}
      </span>
    </div>
  );
}

// src/components/skills/skill-audit.tsx
"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CheckCircle2, AlertTriangle, Search } from "lucide-react";
import { toast } from "sonner";

interface SkillItem {
  name: string;
  issues: string[];
}

interface SkillAuditProps {
  skills: SkillItem[];
  onFixAll: () => void;
}

export function SkillAudit({ skills, onFixAll }: SkillAuditProps) {
  const [auditing, setAuditing] = useState(false);

  const totalSkills = skills.length;
  const skillsWithIssues = skills.filter((s) => s.issues.length > 0);
  const totalIssues = skills.reduce((sum, s) => sum + s.issues.length, 0);
  const allClean = totalIssues === 0;

  async function runAudit() {
    setAuditing(true);
    // Simulasi audit process
    await new Promise((resolve) => setTimeout(resolve, 1500));
    setAuditing(false);
    toast.success(`Audit selesai! ${totalIssues} issues ditemukan.`);
  }

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-semibold text-slate-900">
            🔍 Skill Audit
          </CardTitle>
          <Button
            variant="outline"
            size="sm"
            onClick={runAudit}
            disabled={auditing}
            className="gap-2"
          >
            <Search size={14} className={auditing ? "animate-pulse" : ""} />
            {auditing ? "Scanning..." : "Run Audit"}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-4 mb-4">
          {/* Total */}
          <div className="text-center p-3 bg-slate-50 rounded-lg">
            <p className="text-2xl font-bold text-slate-900">{totalSkills}</p>
            <p className="text-xs text-slate-500">Total Skills</p>
          </div>
          {/* Clean */}
          <div className="text-center p-3 bg-green-50 rounded-lg">
            <p className="text-2xl font-bold text-green-600">
              {totalSkills - skillsWithIssues.length}
            </p>
            <p className="text-xs text-slate-500">Clean ✅</p>
          </div>
          {/* Issues */}
          <div className="text-center p-3 bg-amber-50 rounded-lg">
            <p className="text-2xl font-bold text-amber-600">{totalIssues}</p>
            <p className="text-xs text-slate-500">Issues ⚠️</p>
          </div>
        </div>

        {/* Skills with issues */}
        {skillsWithIssues.length > 0 && (
          <div className="space-y-2">
            <p className="text-sm font-medium text-slate-700">
              Skills dengan masalah:
            </p>
            {skillsWithIssues.map((skill) => (
              <div
                key={skill.name}
                className="flex items-center justify-between p-2 bg-amber-50 rounded-lg"
              >
                <div className="flex items-center gap-2">
                  <AlertTriangle size={14} className="text-amber-500" />
                  <span className="text-sm font-medium text-slate-700">
                    {skill.name}
                  </span>
                </div>
                <Badge variant="outline" className="text-xs text-amber-700 border-amber-200">
                  {skill.issues.length} issues
                </Badge>
              </div>
            ))}
            <Button
              variant="outline"
              size="sm"
              onClick={onFixAll}
              className="w-full mt-2 gap-2 text-amber-600 border-amber-200 hover:bg-amber-50"
            >
              🛠️ Fix All Issues
            </Button>
          </div>
        )}

        {/* All clean */}
        {allClean && (
          <div className="text-center py-4">
            <CheckCircle2 size={32} className="text-green-500 mx-auto mb-2" />
            <p className="text-sm text-green-600 font-medium">
              Semua skill sudah clean! 🎉
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// src/components/skills/skill-editor.tsx
"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { X, Save, Sparkles, Loader2 } from "lucide-react";
import { toast } from "sonner";

interface SkillEditorProps {
  skillName: string;
  onClose: () => void;
}

export function SkillEditor({ skillName, onClose }: SkillEditorProps) {
  const [content, setContent] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [optimizing, setOptimizing] = useState(false);
  const [originalContent, setOriginalContent] = useState("");

  // Load SKILL.md content
  useEffect(() => {
    async function loadSkill() {
      try {
        const res = await fetch(`/api/skills?name=${skillName}`);
        const data = await res.json();
        // Mock content — nanti fetch asli dari file
        const mockContent = `# ${skillName}

## Deskripsi
Skill untuk ${skillName} — AI agent automation.

## Usage
\`\`\`bash
bash skills/${skillName}/scripts/run.sh
\`\`\`

## Dependencies
- bash
- curl

## Notes
- Pastikan API key sudah terkonfigurasi
- Run otomatis via cron job
`;
        setContent(mockContent);
        setOriginalContent(mockContent);
      } catch (err) {
        toast.error("Gagal load SKILL.md");
      } finally {
        setLoading(false);
      }
    }
    loadSkill();
  }, [skillName]);

  // Save content
  async function handleSave() {
    setSaving(true);
    try {
      const res = await fetch("/api/skills", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ skillName, content }),
      });
      if (res.ok) {
        setOriginalContent(content);
        toast.success(`SKILL.md ${skillName} berhasil disimpan!`);
      }
    } catch {
      toast.error("Gagal menyimpan");
    } finally {
      setSaving(false);
    }
  }

  // AI Optimize via Gemini
  async function handleOptimize() {
    setOptimizing(true);
    try {
      const res = await fetch("/api/skills/optimize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ skillName, content }),
      });
      const data = await res.json();
      if (data.optimized) {
        setContent(data.optimized);
        toast.success("SKILL.md berhasil dioptimasi AI! ✨");
      }
    } catch {
      toast.error("Gagal optimize — cek Gemini API key");
    } finally {
      setOptimizing(false);
    }
  }

  const hasChanges = content !== originalContent;

  if (loading) {
    return (
      <Card>
        <CardContent className="p-6 flex items-center justify-center">
          <Loader2 size={24} className="animate-spin text-primary" />
          <span className="ml-2 text-sm text-slate-500">Loading SKILL.md...</span>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border-primary/20">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-semibold text-slate-900">
            ✏️ Edit: {skillName}/SKILL.md
          </CardTitle>
          <Button
            variant="ghost"
            size="icon"
            onClick={onClose}
            className="h-8 w-8"
          >
            <X size={16} />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Textarea editor */}
        <Textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          className="min-h-[300px] font-mono text-sm"
          placeholder="Edit SKILL.md di sini..."
        />

        {/* Action bar */}
        <div className="flex items-center justify-between">
          <div className="flex gap-2">
            <Button
              variant="default"
              size="sm"
              onClick={handleSave}
              disabled={saving || !hasChanges}
              className="gap-2"
            >
              <Save size={14} />
              {saving ? "Menyimpan..." : "Simpan"}
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleOptimize}
              disabled={optimizing}
              className="gap-2 text-purple-600 border-purple-200 hover:bg-purple-50"
            >
              {optimizing ? (
                <Loader2 size={14} className="animate-spin" />
              ) : (
                <Sparkles size={14} />
              )}
              {optimizing ? "Mengoptimasi..." : "AI Optimize"}
            </Button>
          </div>
          {hasChanges && (
            <span className="text-xs text-amber-600">
              ● Perubahan belum disimpan
            </span>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

// src/app/skills/page.tsx
"use client";

import { useState, useEffect, useMemo } from "react";
import { SkillCard } from "@/components/skills/skill-card";
import { SkillAudit } from "@/components/skills/skill-audit";
import { SkillEditor } from "@/components/skills/skill-editor";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Search, Plus } from "lucide-react";
import { toast } from "sonner";

interface SkillItem {
  name: string;
  category: string;
  description: string;
  hasSkillMd: boolean;
  hasScriptsDir: boolean;
  hasExecutePermission: boolean;
  issues: string[];
}

export default function SkillsPage() {
  const [skills, setSkills] = useState<SkillItem[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [editingSkill, setEditingSkill] = useState<string | null>(null);

  // Fetch skills
  useEffect(() => {
    async function fetchSkills() {
      try {
        const res = await fetch("/api/skills");
        const data = await res.json();
        setSkills(data.skills);
        setCategories(data.categories);
      } catch (err) {
        toast.error("Gagal fetch skills");
      } finally {
        setLoading(false);
      }
    }
    fetchSkills();
  }, []);

  // Filter skills berdasarkan search & category
  const filteredSkills = useMemo(() => {
    return skills.filter((skill) => {
      const matchSearch =
        skill.name.toLowerCase().includes(search.toLowerCase()) ||
        skill.description.toLowerCase().includes(search.toLowerCase());
      const matchCategory =
        categoryFilter === "all" || skill.category === categoryFilter;
      return matchSearch && matchCategory;
    });
  }, [skills, search, categoryFilter]);

  // Fix issues untuk satu skill
  async function handleFix(skillName: string) {
    try {
      const res = await fetch("/api/skills", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ skillName, action: "fix" }),
      });
      if (res.ok) {
        toast.success(`Issues ${skillName} berhasil di-fix! 🛠️`);
        // Refresh skills
        const refetch = await fetch("/api/skills");
        const data = await refetch.json();
        setSkills(data.skills);
      }
    } catch {
      toast.error("Gagal fix issues");
    }
  }

  // Fix all issues
  async function handleFixAll() {
    const skillsWithIssues = skills.filter((s) => s.issues.length > 0);
    toast.loading(`Fixing ${skillsWithIssues.length} skills...`, {
      id: "fix-all",
    });

    for (const skill of skillsWithIssues) {
      await handleFix(skill.name);
    }

    toast.success("Semua issues berhasil di-fix! 🎉", { id: "fix-all" });
  }

  // Edit skill
  function handleEdit(name: string) {
    setEditingSkill(name);
  }

  // AI Optimize skill
  function handleOptimize(name: string) {
    setEditingSkill(name);
    toast.info("Buka editor, lalu klik 'AI Optimize' ✨");
  }

  // Loading state
  if (loading) {
    return (
      <div className="space-y-6 animate-pulse">
        <div className="h-12 bg-slate-200 rounded-xl" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="h-56 bg-slate-200 rounded-xl" />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Search & filter bar */}
      <div className="flex flex-col sm:flex-row gap-3">
        <div className="relative flex-1">
          <Search
            size={16}
            className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          />
          <Input
            placeholder="Cari skill..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-9"
          />
        </div>
        <Select value={categoryFilter} onValueChange={setCategoryFilter}>
          <SelectTrigger className="w-full sm:w-48">
            <SelectValue placeholder="Kategori" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Semua Kategori</SelectItem>
            {categories.map((cat) => (
              <SelectItem key={cat} value={cat}>
                {cat}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button variant="outline" className="gap-2" disabled>
          <Plus size={16} />
          Tambah Skill
        </Button>
      </div>

      {/* Skill audit summary */}
      <SkillAudit
        skills={skills}
        onFixAll={handleFixAll}
      />

      {/* Skill editor (kalau sedang edit) */}
      {editingSkill && (
        <SkillEditor
          skillName={editingSkill}
          onClose={() => setEditingSkill(null)}
        />
      )}

      {/* Skills grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredSkills.map((skill) => (
          <SkillCard
            key={skill.name}
            skill={skill}
            onEdit={handleEdit}
            onOptimize={handleOptimize}
            onFix={handleFix}
          />
        ))}
      </div>

      {/* Empty state */}
      {filteredSkills.length === 0 && (
        <div className="text-center py-12">
          <p className="text-slate-400">
            {search || categoryFilter !== "all"
              ? "Tidak ada skill yang cocok dengan filter."
              : "Belum ada skills."}
          </p>
        </div>
      )}
    </div>
  );
}

// app/schedule/components/StatsCards.tsx
// Kartu statistik untuk halaman Schedule
'use client';

import { useEffect, useState } from 'react';

interface StatsCardsProps {
  stats: {
    totalJobs: number;
    activeJobs: number;
    disabledJobs: number;
    failedJobs: number;
  };
}

// Komponen animasi counter — angka naik dari 0 ke target
function AnimatedCounter({ target, duration = 1000 }: { target: number; duration?: number }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let startTime: number;
    let animationFrame: number;

    const animate = (timestamp: number) => {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      // Easing: ease-out
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.floor(eased * target));

      if (progress < 1) {
        animationFrame = requestAnimationFrame(animate);
      }
    };

    animationFrame = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationFrame);
  }, [target, duration]);

  return <span>{count}</span>;
}

export default function StatsCards({ stats }: StatsCardsProps) {
  const cards = [
    {
      label: 'Total Jobs',
      value: stats.totalJobs,
      icon: '📋',
      color: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
      iconBg: 'bg-blue-500/20',
    },
    {
      label: 'Active',
      value: stats.activeJobs,
      icon: '✅',
      color: 'bg-green-500/10 text-green-400 border-green-500/20',
      iconBg: 'bg-green-500/20',
    },
    {
      label: 'Disabled',
      value: stats.disabledJobs,
      icon: '⏸️',
      color: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
      iconBg: 'bg-gray-500/20',
    },
    {
      label: 'Failed',
      value: stats.failedJobs,
      icon: '❌',
      color: 'bg-red-500/10 text-red-400 border-red-500/20',
      iconBg: 'bg-red-500/20',
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      {cards.map((card) => (
        <div
          key={card.label}
          className={`rounded-xl border p-5 ${card.color} transition-all duration-200 hover:scale-[1.02]`}
        >
          <div className="flex items-center justify-between mb-3">
            <span className="text-sm font-medium opacity-80">{card.label}</span>
            <span className={`text-2xl p-2 rounded-lg ${card.iconBg}`}>{card.icon}</span>
          </div>
          <div className="text-3xl font-bold">
            <AnimatedCounter target={card.value} />
          </div>
        </div>
      ))}
    </div>
  );
}

// app/schedule/components/JobChart.tsx
// Pie chart distribusi job berdasarkan status
'use client';

import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';

interface DistributionItem {
  name: string;
  value: number;
  color: string;
}

interface JobChartProps {
  distribution: DistributionItem[];
}

// Custom tooltip
function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }> }) {
  if (!active || !payload?.length) return null;

  return (
    <div className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 shadow-xl">
      <p className="text-sm font-medium" style={{ color: payload[0].color }}>
        {payload[0].name}: {payload[0].value} job(s)
      </p>
    </div>
  );
}

export default function JobChart({ distribution }: JobChartProps) {
  // Filter hanya yang nilainya > 0
  const filtered = distribution.filter(d => d.value > 0);

  return (
    <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
      <h3 className="text-lg font-semibold text-white mb-4">📊 Distribusi Job</h3>
      
      {filtered.length === 0 ? (
        <div className="flex items-center justify-center h-48 text-gray-500">
          Belum ada data job
        </div>
      ) : (
        <ResponsiveContainer width="100%" height={250}>
          <PieChart>
            <Pie
              data={filtered}
              cx="50%"
              cy="50%"
              innerRadius={60}
              outerRadius={90}
              paddingAngle={4}
              dataKey="value"
              stroke="none"
            >
              {filtered.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Tooltip content={<CustomTooltip />} />
            <Legend
              wrapperStyle={{ fontSize: '13px' }}
              formatter={(value: string) => (
                <span className="text-gray-300">{value}</span>
              )}
            />
          </PieChart>
        </ResponsiveContainer>
      )}
    </div>
  );
}