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 { Badge } from "@/components/ui/badge";
import {
  FileText,
  Folder,
  Search,
  Plus,
  MoreVertical,
  FileCode,
  FileType,
} from "lucide-react";

const documents = [
  {
    id: 1,
    name: "USER.md",
    type: "markdown",
    size: "4.2 KB",
    updated: "Today",
    folder: "root",
    description: "User profile and preferences",
  },
  {
    id: 2,
    name: "SOUL.md",
    type: "markdown",
    size: "2.1 KB",
    updated: "Today",
    folder: "root",
    description: "Assistant personality configuration",
  },
  {
    id: 3,
    name: "DAILY_TOOLS_SETUP.md",
    type: "markdown",
    size: "6.8 KB",
    updated: "Yesterday",
    folder: "docs",
    description: "Tool integration documentation",
  },
  {
    id: 4,
    name: "AGENTS.md",
    type: "markdown",
    size: "3.5 KB",
    updated: "2 days ago",
    folder: "root",
    description: "Workspace guidelines",
  },
  {
    id: 5,
    name: "organize_downloads.sh",
    type: "code",
    size: "2.2 KB",
    updated: "Yesterday",
    folder: "scripts",
    description: "File organization script",
  },
  {
    id: 6,
    name: "morning_brief.sh",
    type: "code",
    size: "3.1 KB",
    updated: "Yesterday",
    folder: "scripts",
    description: "Daily automation script",
  },
  {
    id: 7,
    name: "file-system-assistant.skill",
    type: "archive",
    size: "12 KB",
    updated: "Yesterday",
    folder: "skills",
    description: "Packaged skill file",
  },
  {
    id: 8,
    name: "email-assistant.skill",
    type: "archive",
    size: "15 KB",
    updated: "Yesterday",
    folder: "skills",
    description: "Packaged skill file",
  },
];

const folders = [
  { name: "root", count: 4 },
  { name: "docs", count: 1 },
  { name: "scripts", count: 2 },
  { name: "skills", count: 6 },
];

const typeIcons: Record<string, typeof FileText> = {
  markdown: FileType,
  code: FileCode,
  archive: FileText,
  default: FileText,
};

const typeColors: Record<string, string> = {
  markdown: "text-blue-500",
  code: "text-green-500",
  archive: "text-yellow-500",
  default: "text-muted-foreground",
};

export default function DocumentsPage() {
  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">Documents</h1>
            <p className="text-muted-foreground mt-1">
              All the files and docs created for your mission.
            </p>
          </div>
          <Button>
            <Plus className="w-4 h-4 mr-2" />
            New Document
          </Button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Sidebar - Folders */}
          <div className="lg:col-span-1 space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Folders</CardTitle>
              </CardHeader>
              <CardContent className="space-y-1">
                {folders.map((folder) => (
                  <button
                    key={folder.name}
                    className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm hover:bg-accent transition-colors"
                  >
                    <span className="flex items-center gap-2">
                      <Folder className="w-4 h-4 text-muted-foreground" />
                      {folder.name}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {folder.count}
                    </span>
                  </button>
                ))}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">Storage</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Used</span>
                    <span>45.2 GB</span>
                  </div>
                  <div className="h-2 bg-secondary rounded-full overflow-hidden">
                    <div className="h-full w-[45%] bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    54.8 GB free of 100 GB
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Document List */}
          <div className="lg:col-span-3 space-y-4">
            <div className="flex gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input placeholder="Search documents..." className="pl-9" />
              </div>
            </div>

            <Card>
              <CardContent className="p-0">
                <div className="divide-y divide-border">
                  {documents.map((doc) => {
                    const Icon = typeIcons[doc.type] || typeIcons.default;
                    const colorClass = typeColors[doc.type] || typeColors.default;
                    return (
                      <div
                        key={doc.id}
                        className="flex items-center gap-4 p-4 hover:bg-accent/50 transition-colors cursor-pointer"
                      >
                        <Icon className={`w-8 h-8 ${colorClass}`} />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <h4 className="font-medium truncate">{doc.name}</h4>
                            <Badge variant="secondary" className="text-xs shrink-0">
                              {doc.folder}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground truncate">
                            {doc.description}
                          </p>
                        </div>
                        <div className="hidden sm:block text-right text-sm text-muted-foreground">
                          <p>{doc.size}</p>
                          <p className="text-xs">{doc.updated}</p>
                        </div>
                        <Button variant="ghost" size="icon">
                          <MoreVertical className="w-4 h-4" />
                        </Button>
                      </div>
                    );
                  })}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}