mission-control/app/tools/page.tsx

import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Wrench,
  Plus,
  FileCode,
  Terminal,
  Globe,
  Database,
  Mail,
  Calendar,
  CheckCircle2,
} from "lucide-react";

const installedTools = [
  {
    id: 1,
    name: "File System Assistant",
    description: "Organize, search, and manage local files",
    category: "system",
    status: "active",
    lastUsed: "Today",
  },
  {
    id: 2,
    name: "Browser Automation",
    description: "Web research, screenshots, form filling",
    category: "web",
    status: "active",
    lastUsed: "Yesterday",
  },
  {
    id: 3,
    name: "Calendar Assistant",
    description: "Apple Calendar + Google Calendar integration",
    category: "calendar",
    status: "active",
    lastUsed: "Today",
  },
  {
    id: 4,
    name: "Email Assistant",
    description: "Apple Mail + Gmail integration",
    category: "email",
    status: "active",
    lastUsed: "Today",
  },
  {
    id: 5,
    name: "Daily Automation",
    description: "Morning briefing orchestration",
    category: "automation",
    status: "active",
    lastUsed: "Today",
  },
];

const toolTemplates = [
  {
    name: "API Integration",
    description: "Connect to external APIs",
    icon: Globe,
    category: "integration",
  },
  {
    name: "Database Tool",
    description: "Query and manage databases",
    icon: Database,
    category: "data",
  },
  {
    name: "Script Runner",
    description: "Execute custom scripts",
    icon: Terminal,
    category: "automation",
  },
  {
    name: "Email Processor",
    description: "Process and route emails",
    icon: Mail,
    category: "email",
  },
  {
    name: "Calendar Sync",
    description: "Sync multiple calendars",
    icon: Calendar,
    category: "calendar",
  },
];

const categoryColors: Record<string, string> = {
  system: "bg-blue-500/10 text-blue-500",
  web: "bg-purple-500/10 text-purple-500",
  calendar: "bg-green-500/10 text-green-500",
  email: "bg-yellow-500/10 text-yellow-500",
  automation: "bg-pink-500/10 text-pink-500",
  integration: "bg-orange-500/10 text-orange-500",
  data: "bg-cyan-500/10 text-cyan-500",
};

export default function ToolsPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Tool Builder</h1>
            <p className="text-muted-foreground mt-1">
              Create and manage custom tools and skills.
            </p>
          </div>
          <Button>
            <Plus className="w-4 h-4 mr-2" />
            Build New Tool
          </Button>
        </div>

        <Tabs defaultValue="installed" className="space-y-6">
          <TabsList>
            <TabsTrigger value="installed">Installed ({installedTools.length})</TabsTrigger>
            <TabsTrigger value="templates">Templates</TabsTrigger>
            <TabsTrigger value="builder">Quick Builder</TabsTrigger>
          </TabsList>

          <TabsContent value="installed" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {installedTools.map((tool) => (
                <Card key={tool.id}>
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between">
                      <div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
                        <Wrench className="w-5 h-5" />
                      </div>
                      <Badge className={categoryColors[tool.category]}>
                        {tool.category}
                      </Badge>
                    </div>
                    <CardTitle className="text-base mt-3">{tool.name}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-4">
                      {tool.description}
                    </p>
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <CheckCircle2 className="w-3 h-3 text-green-500" />
                        {tool.status}
                      </span>
                      <span>Last used: {tool.lastUsed}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="templates" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {toolTemplates.map((template, i) => {
                const Icon = template.icon;
                return (
                  <Card key={i} className="cursor-pointer hover:shadow-md transition-shadow">
                    <CardHeader className="pb-3">
                      <div className="flex items-start justify-between">
                        <div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
                          <Icon className="w-5 h-5" />
                        </div>
                        <Badge variant="outline">Template</Badge>
                      </div>
                      <CardTitle className="text-base mt-3">{template.name}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        {template.description}
                      </p>
                      <Button variant="ghost" className="w-full mt-4">
                        Use Template
                      </Button>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </TabsContent>

          <TabsContent value="builder" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Quick Tool Builder</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Tool Name</Label>
                    <Input placeholder="e.g., Stock Price Checker" />
                  </div>
                  <div className="space-y-2">
                    <Label>Category</Label>
                    <Input placeholder="e.g., finance" />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Description</Label>
                  <Input placeholder="What does this tool do?" />
                </div>
                <div className="space-y-2">
                  <Label>Script / Command</Label>
                  <textarea
                    className="w-full min-h-[150px] p-3 rounded-md border border-input bg-background text-sm font-mono"
                    placeholder={`#!/bin/bash
# Your tool logic here
echo "Hello World"`}
                  />
                </div>
                <div className="flex gap-2">
                  <Button>Build Tool</Button>
                  <Button variant="outline">Test</Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  );
}