import { FolderOpen, Keyboard } from "lucide-react";
import { open } from "@tauri-apps/plugin-dialog";
import { Button } from "@/components/ui/button";
import { useStore, actions } from "@/lib/store";

const shortcuts = [
  { keys: "Ctrl+P", action: "Quick Open File" },
  { keys: "Ctrl+Shift+P", action: "Command Palette" },
  { keys: "Ctrl+S", action: "Save File" },
  { keys: "Ctrl+Shift+S", action: "Save All" },
  { keys: "Ctrl+W", action: "Close Tab" },
  { keys: "Ctrl+B", action: "Toggle Sidebar" },
  { keys: "Ctrl+Shift+F", action: "Search in Files" },
  { keys: "Ctrl+G", action: "Go to Line" },
  { keys: "Ctrl+`", action: "Toggle Terminal" },
  { keys: "Ctrl+\\", action: "Split Editor" },
  { keys: "Ctrl+F", action: "Find in File" },
];

export function WelcomeTab() {
  const { recentWorkspaces } = useStore();

  const handleOpenFolder = async () => {
    const selected = await open({ directory: true, multiple: false });
    if (selected) {
      actions.setWorkspace(selected as string);
    }
  };

  const handleOpenRecent = (path: string) => {
    actions.setWorkspace(path);
  };

  return (
    <div className="flex h-full items-center justify-center text-foreground overflow-auto">
      <div className="max-w-lg w-full px-8 py-12 space-y-8">
        <div className="text-center space-y-2">
          <h1 className="text-2xl font-light">Lunar Code</h1>
          <p className="text-sm text-muted-foreground">Lightweight. Fast. Focused.</p>
        </div>

        <div className="flex justify-center">
          <Button variant="secondary" size="default" onClick={handleOpenFolder} className="gap-2">
            <FolderOpen className="h-4 w-4" />
            Open Folder
          </Button>
        </div>

        {recentWorkspaces.length > 0 && (
          <div className="space-y-2">
            <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Recent
            </h2>
            <div className="space-y-0.5">
              {recentWorkspaces.slice(0, 5).map((path) => {
                const name = path.split("/").pop() ?? path.split("\\").pop() ?? path;
                return (
                  <button
                    key={path}
                    className="flex flex-col w-full text-left px-3 py-1.5 rounded-sm hover:bg-accent transition-colors"
                    onClick={() => handleOpenRecent(path)}
                  >
                    <span className="text-sm text-primary">{name}</span>
                    <span className="text-xs text-muted-foreground truncate">{path}</span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        <div className="space-y-2">
          <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1">
            <Keyboard className="h-3 w-3" />
            Keyboard Shortcuts
          </h2>
          <div className="grid grid-cols-2 gap-x-6 gap-y-0.5">
            {shortcuts.map((s) => (
              <div key={s.keys} className="flex items-center justify-between py-0.5">
                <span className="text-xs text-muted-foreground">{s.action}</span>
                <kbd className="ml-2 px-1.5 py-0.5 text-[10px] font-mono bg-secondary rounded text-secondary-foreground">
                  {s.keys}
                </kbd>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
