import { useState } from "react";

// =============================================
// Types
// =============================================
interface FolderItem {
  id: string;
  name: string;
  type: "folder" | "file";
  children?: FolderItem[];
}

// =============================================
// File Tree Data (DO NOT MODIFY)
// =============================================
const FILE_TREE: FolderItem = {
  id: "root",
  name: "Home",
  type: "folder",
  children: [
    {
      id: "documents",
      name: "Documents",
      type: "folder",
      children: [
        {
          id: "work",
          name: "Work",
          type: "folder",
          children: [
            { id: "report", name: "report.pdf", type: "file" },
            { id: "slides", name: "slides.pptx", type: "file" },
          ],
        },
        {
          id: "personal",
          name: "Personal",
          type: "folder",
          children: [
            { id: "resume", name: "resume.pdf", type: "file" },
            { id: "notes", name: "notes.txt", type: "file" },
          ],
        },
      ],
    },
    {
      id: "photos",
      name: "Photos",
      type: "folder",
      children: [
        {
          id: "vacation",
          name: "Vacation",
          type: "folder",
          children: [
            { id: "beach", name: "beach.jpg", type: "file" },
            { id: "mountain", name: "mountain.jpg", type: "file" },
          ],
        },
        { id: "profile", name: "profile.png", type: "file" },
      ],
    },
    {
      id: "music",
      name: "Music",
      type: "folder",
      children: [
        { id: "song1", name: "song1.mp3", type: "file" },
        { id: "song2", name: "song2.mp3", type: "file" },
      ],
    },
  ],
};

// =============================================
// TODO: Implement Breadcrumb Navigation
// =============================================
//
// Requirements:
//   1. Display the current folder's contents (subfolders & files)
//   2. Clicking a folder should navigate into it
//   3. Show a breadcrumb trail: Home / Documents / Work
//   4. Clicking any breadcrumb segment navigates back to that folder
//   5. Differentiate folders (📁) from files (📄) visually
//   6. Handle edge cases: root level, deeply nested, empty folders
//
// Hints:
//   - Track the current path as an array of FolderItem[]
//   - path[0] is always FILE_TREE (root)
//   - path[path.length - 1] is the current folder
//   - navigateInto(folder): push folder onto path
//   - navigateTo(index): slice path to index + 1
//   - currentFolder.children gives you the items to render

export default function App() {
  // TODO: Initialize path state with [FILE_TREE]
  // const [path, setPath] = useState<FolderItem[]>(???);

  // TODO: Derive the current folder from the path
  // const currentFolder = ???;

  // TODO: Implement navigateInto — push the clicked folder onto path
  const navigateInto = (folder: FolderItem) => {
    // Your code here
  };

  // TODO: Implement navigateTo — slice path up to the clicked breadcrumb index
  const navigateTo = (index: number) => {
    // Your code here
  };

  return (
    <div style={{ maxWidth: 600, margin: "0 auto", padding: 24, fontFamily: "system-ui" }}>
      <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 4 }}>
        Breadcrumb Navigation
      </h2>
      <p style={{ fontSize: 14, color: "#666", marginBottom: 24 }}>
        Click folders to navigate in. Click breadcrumbs to go back.
      </p>

      {/* ============================================= */}
      {/* TODO: Render the breadcrumb trail              */}
      {/* ============================================= */}
      {/* 
        - Map over the `path` array
        - Each segment shows its name
        - Add a "/" separator between segments
        - Last segment is plain text (current location)
        - Other segments are clickable buttons that call navigateTo(index)
      */}
      <nav style={{ marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 14 }}>
          {/* Your breadcrumb rendering here */}
          <span style={{ color: "#999" }}>Home</span>
        </div>
      </nav>

      {/* ============================================= */}
      {/* TODO: Render the folder contents               */}
      {/* ============================================= */}
      {/*
        - Use currentFolder.children to get items
        - For folders: render a clickable row with 📁 that calls navigateInto(item)
        - For files: render a non-clickable row with 📄
        - Handle empty folders with a "This folder is empty" message
      */}
      <div style={{
        border: "1px solid #e5e7eb",
        borderRadius: 8,
        overflow: "hidden",
      }}>
        {/* Your folder contents here */}
        <div style={{ padding: "40px 16px", textAlign: "center", color: "#999", fontSize: 14 }}>
          Implement the folder listing here
        </div>
      </div>

      {/* Hint box */}
      <div style={{
        marginTop: 24,
        padding: 16,
        background: "#f9fafb",
        borderLeft: "4px solid #111",
        borderRadius: "0 8px 8px 0",
        fontSize: 13,
        color: "#555",
      }}>
        <strong>Hint:</strong> Track path as <code>FolderItem[]</code>.
        Push to go deeper, slice to go back. The last item is always the current folder.
      </div>
    </div>
  );
}