"use client";

import { useState } from "react";

const SKILLS = [
  { id: "github", name: "GitHub", description: "Manage GitHub repositories", enabled: true },
  { id: "healthcheck", name: "Health Check", description: "System security hardening", enabled: true },
  { id: "tmux", name: "Tmux", description: "Remote-control tmux sessions", enabled: true },
  { id: "weather", name: "Weather", description: "Weather forecasts via wttr.in", enabled: true },
  { id: "tavily", name: "Tavily", description: "Web search and extraction", enabled: true },
  { id: "coingecko", name: "CoinGecko", description: "Crypto prices and market data", enabled: true },
  { id: "discord", name: "Discord", description: "Discord operations", enabled: false },
  { id: "clawhub", name: "ClawHub", description: "Skill management", enabled: true },
];

const APIS = [
  { id: "perplexity", name: "Perplexity", status: "active", color: "green" },
  { id: "openweather", name: "OpenWeather", status: "active", color: "green" },
  { id: "newsapi", name: "NewsAPI", status: "active", color: "green" },
  { id: "coingecko", name: "CoinGecko", status: "active", color: "green" },
  { id: "tavily", name: "Tavily", status: "active", color: "green" },
  { id: "elevenlabs", name: "ElevenLabs", status: "inactive", color: "yellow" },
];

const AUTOMATIONS = [
  { id: "morning-brief", name: "Morning Brief", schedule: "06:00 CET", enabled: true },
  { id: "backups", name: "Backups", schedule: "02:00 CET", enabled: true },
  { id: "health-checks", name: "Health Checks", schedule: "30min", enabled: true },
  { id: "trading-scan", name: "Trading Scan", schedule: "30min", enabled: false },
];

export default function HorusAIPage() {
  const [skills, setSkills] = useState(SKILLS);
  const [automations, setAutomations] = useState(AUTOMATIONS);

  const toggleSkill = (id: string) => {
    setSkills(skills.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s));
  };

  const toggleAutomation = (id: string) => {
    setAutomations(automations.map(a => a.id === id ? { ...a, enabled: !a.enabled } : a));
  };

  return (
    <div className="p-6 max-w-6xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">🤖 Horus AI</h1>
        <p className="text-slate-400">Manage skills, APIs, and automation toggles</p>
      </div>

      {/* Skills */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
          <span>🎯</span> Skills
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {skills.map(skill => (
            <div key={skill.id} className="bg-slate-800 rounded-lg p-4 flex items-center justify-between">
              <div>
                <h3 className="font-medium text-white">{skill.name}</h3>
                <p className="text-xs text-slate-400">{skill.description}</p>
              </div>
              <button
                onClick={() => toggleSkill(skill.id)}
                className={`w-12 h-6 rounded-full transition-colors ${
                  skill.enabled ? "bg-green-500" : "bg-slate-600"
                }`}
              >
                <div className={`w-5 h-5 rounded-full bg-white transition-transform ${
                  skill.enabled ? "translate-x-6" : "translate-x-0.5"
                }`} />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* APIs */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
          <span>🔌</span> APIs
        </h2>
        <div className="bg-slate-800 rounded-lg overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-700">
                <th className="text-left p-3 text-slate-400 font-medium">API</th>
                <th className="text-left p-3 text-slate-400 font-medium">Status</th>
              </tr>
            </thead>
            <tbody>
              {APIS.map(api => (
                <tr key={api.id} className="border-b border-slate-700/50">
                  <td className="p-3 text-white">{api.name}</td>
                  <td className="p-3">
                    <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${
                      api.color === "green" ? "bg-green-500/20 text-green-400" : "bg-yellow-500/20 text-yellow-400"
                    }`}>
                      <span className={`w-1.5 h-1.5 rounded-full ${
                        api.color === "green" ? "bg-green-400" : "bg-yellow-400"
                      }`} />
                      {api.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Automations */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
          <span>⚡</span> Automation
        </h2>
        <div className="bg-slate-800 rounded-lg overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-700">
                <th className="text-left p-3 text-slate-400 font-medium">Cron Job</th>
                <th className="text-left p-3 text-slate-400 font-medium">Schedule</th>
                <th className="text-left p-3 text-slate-400 font-medium">Status</th>
              </tr>
            </thead>
            <tbody>
              {automations.map(automation => (
                <tr key={automation.id} className="border-b border-slate-700/50">
                  <td className="p-3 text-white">{automation.name}</td>
                  <td className="p-3 text-slate-400">{automation.schedule}</td>
                  <td className="p-3">
                    <button
                      onClick={() => toggleAutomation(automation.id)}
                      className={`w-12 h-6 rounded-full transition-colors ${
                        automation.enabled ? "bg-green-500" : "bg-slate-600"
                      }`}
                    >
                      <div className={`w-5 h-5 rounded-full bg-white transition-transform ${
                        automation.enabled ? "translate-x-6" : "translate-x-0.5"
                      }`} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}