import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import {
  Bars3Icon,
  XMarkIcon,
  HomeIcon,
  ChartBarIcon,
  CogIcon,
  DocumentTextIcon,
  CurrencyDollarIcon,
} from '@heroicons/react/24/outline';

const navigation = [
  { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
  { name: 'Portfolio', href: '#', icon: CurrencyDollarIcon, current: false },
  { name: 'Analytics', href: '#', icon: ChartBarIcon, current: false },
  { name: 'Reports', href: '#', icon: DocumentTextIcon, current: false },
  { name: 'Settings', href: '#', icon: CogIcon, current: false },
];

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(' ');
}

export default function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-background">
      <div>
        <Dialog
          as="div"
          className="relative z-50 lg:hidden"
          open={sidebarOpen}
          onClose={setSidebarOpen}
        >
          <div className="fixed inset-0 bg-black/80" />

          <div className="fixed inset-0 flex">
            <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
              <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                <button
                  type="button"
                  className="-m-2.5 p-2.5"
                  onClick={() => setSidebarOpen(false)}
                >
                  <span className="sr-only">Close sidebar</span>
                  <XMarkIcon className="h-6 w-6 text-text-primary" aria-hidden="true" />
                </button>
              </div>

              <div className="flex grow flex-col gap-y-3 overflow-y-auto bg-background px-3 pb-2 scrollbar-thin">
                <div className="flex h-12 shrink-0 items-center border-b border-border">
                  <h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
                </div>
                <nav className="flex flex-1 flex-col">
                  <ul role="list" className="flex flex-1 flex-col gap-y-4">
                    <li>
                      <ul role="list" className="-mx-1 space-y-0.5">
                        {navigation.map(item => (
                          <li key={item.name}>
                            <a
                              href={item.href}
                              className={classNames(
                                item.current
                                  ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
                                  : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
                                'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
                              )}
                            >
                              <item.icon
                                className={classNames(
                                  item.current
                                    ? 'text-primary-400'
                                    : 'text-text-muted group-hover:text-primary-400',
                                  'h-4 w-4 shrink-0 transition-colors'
                                )}
                                aria-hidden="true"
                              />
                              {item.name}
                            </a>
                          </li>
                        ))}
                      </ul>
                    </li>
                  </ul>
                </nav>
              </div>
            </Dialog.Panel>
          </div>
        </Dialog>

        {/* Static sidebar for desktop */}
        <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
          <div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3 scrollbar-thin">
            <div className="flex h-12 shrink-0 items-center border-b border-border">
              <h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
            </div>
            <nav className="flex flex-1 flex-col">
              <ul role="list" className="flex flex-1 flex-col gap-y-4">
                <li>
                  <ul role="list" className="-mx-1 space-y-0.5">
                    {navigation.map(item => (
                      <li key={item.name}>
                        <a
                          href={item.href}
                          className={classNames(
                            item.current
                              ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
                              : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
                            'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
                          )}
                        >
                          <item.icon
                            className={classNames(
                              item.current
                                ? 'text-primary-400'
                                : 'text-text-muted group-hover:text-primary-400',
                              'h-4 w-4 shrink-0 transition-colors'
                            )}
                            aria-hidden="true"
                          />
                          {item.name}
                        </a>
                      </li>
                    ))}
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </div>

        <div className="sticky top-0 z-40 flex items-center gap-x-4 bg-background px-3 py-2 shadow-sm sm:px-4 lg:hidden border-b border-border">
          <button
            type="button"
            className="-m-1.5 p-1.5 text-text-secondary lg:hidden hover:text-text-primary transition-colors"
            onClick={() => setSidebarOpen(true)}
          >
            <span className="sr-only">Open sidebar</span>
            <Bars3Icon className="h-5 w-5" aria-hidden="true" />
          </button>
          <div className="flex-1 text-sm font-medium leading-tight text-text-primary">
            Dashboard
          </div>
        </div>

        <main className="py-4 lg:pl-60 w-full">
          <div className="px-4">
            <h1 className="text-lg font-bold text-text-primary mb-2">
              Welcome to Stock Bot Dashboard
            </h1>
            <p className="text-text-secondary mb-6 text-sm">
              Monitor your trading performance, manage portfolios, and analyze market data.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mb-6">
                    <div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-primary-500/50 transition-colors">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-primary-500/10 rounded">
                          <CurrencyDollarIcon className="h-5 w-5 text-primary-400" />
                        </div>
                        <div className="ml-3">
                          <h3 className="text-sm font-medium text-text-primary">Portfolio Value</h3>
                          <p className="text-lg font-bold text-primary-400">$0.00</p>
                          <p className="text-xs text-text-muted">Total assets</p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-success/50 transition-colors">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-success/10 rounded">
                          <ChartBarIcon className="h-5 w-5 text-success" />
                        </div>
                        <div className="ml-3">
                          <h3 className="text-sm font-medium text-text-primary">Total Return</h3>
                          <p className="text-lg font-bold text-success">+0.00%</p>
                          <p className="text-xs text-text-muted">Since inception</p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-warning/50 transition-colors">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-warning/10 rounded">
                          <DocumentTextIcon className="h-5 w-5 text-warning" />
                        </div>
                        <div className="ml-3">
                          <h3 className="text-sm font-medium text-text-primary">
                            Active Strategies
                          </h3>
                          <p className="text-lg font-bold text-warning">0</p>
                          <p className="text-xs text-text-muted">Running algorithms</p>
                        </div>
                      </div>
                    </div>
                  </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              <div className="bg-surface-secondary p-4 rounded-lg border border-border">
                <h3 className="text-base font-medium text-text-primary mb-3">
                  Recent Activity
                </h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between p-2 bg-surface-tertiary rounded border border-border">
                    <span className="text-text-secondary text-sm">No recent activity</span>
                    <span className="text-text-muted text-xs">--</span>
                  </div>
                </div>
              </div>

              <div className="bg-surface-secondary p-4 rounded-lg border border-border">
                <h3 className="text-base font-medium text-text-primary mb-3">
                  Market Overview
                </h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between p-2 bg-surface-tertiary rounded border border-border">
                    <span className="text-text-secondary text-sm">
                      Market data loading...
                    </span>
                    <span className="text-text-muted text-xs">--</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}