import React from 'react';

interface HomeProps {
  onStart: () => void;
}

export const Home: React.FC<HomeProps> = ({ onStart }) => {
  const quickCommands = [
    { cmd: '/search AAPL', desc: 'Load live Apple quote', icon: '🔍' },
    { cmd: '/portfolio', desc: 'View portfolio', icon: '📊' },
    { cmd: '/news AAPL', desc: 'Latest news', icon: '📰' },
    { cmd: '/analyze AAPL', desc: 'Run analysis', icon: '⚡' },
  ];

  const stats = [
    { label: 'Companies', value: '12', color: 'text-[#58a6ff]' },
    { label: 'Positions', value: '8', color: 'text-[#00d26a]' },
    { label: 'Watchlist', value: '24', color: 'text-[#ffb000]' },
    { label: 'Gain', value: '+12.4%', color: 'text-[#00d26a]' },
  ];

  return (
    <div className="h-screen bg-[#0a0a0a] flex flex-col">
      {/* Header */}
      <header className="border-b border-[#2a2a2a] px-6 py-4">
        <div className="flex items-center justify-between max-w-6xl mx-auto">
          <div className="flex items-center gap-4">
            <div className="w-10 h-10 bg-gradient-to-br from-[#58a6ff] to-[#00d26a] rounded-lg flex items-center justify-center text-[#0a0a0a] font-bold text-lg">
              M
            </div>
            <div>
              <h1 className="text-lg font-mono font-bold text-[#e0e0e0]">MosaicIQ</h1>
              <p className="text-[10px] text-[#888888] font-mono">Financial Research Terminal</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2 text-[10px] font-mono text-[#888888]">
              <span className="w-2 h-2 bg-[#00d26a] rounded-full animate-pulse"></span>
              Local Runtime Active
            </div>
            <button
              onClick={onStart}
              className="px-4 py-2 bg-[#1a1a1a] hover:bg-[#2a2a2a] border border-[#2a2a2a] hover:border-[#58a6ff] text-[#e0e0e0] text-xs font-mono rounded transition-all"
            >
              Enter Terminal
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 overflow-auto p-6">
        <div className="max-w-6xl mx-auto">
          {/* Hero Section */}
          <div className="mb-8">
            <div className="flex items-baseline gap-3 mb-2">
              <h2 className="text-2xl font-mono font-bold text-[#e0e0e0]">
                Welcome back
              </h2>
              <span className="text-sm font-mono text-[#888888]">
                v1.0.0
              </span>
            </div>
            <p className="text-sm text-[#888888] font-mono max-w-2xl">
              Your local-first financial research workspace. Analyze companies, track portfolios,
              and stay informed with AI-powered insights.
            </p>
          </div>

          {/* Stats Grid */}
          <div className="grid grid-cols-4 gap-4 mb-8">
            {stats.map((stat, idx) => (
              <div
                key={idx}
                className="bg-[#111111] border border-[#2a2a2a] p-4 rounded hover:border-[#3a3a3a] transition-all animate-in"
                style={{ animationDelay: `${idx * 75}ms` }}
              >
                <p className="text-[10px] text-[#888888] font-mono uppercase tracking-wide mb-1">
                  {stat.label}
                </p>
                <p className={`text-xl font-mono font-bold ${stat.color}`}>
                  {stat.value}
                </p>
              </div>
            ))}
          </div>

          {/* Quick Commands */}
          <div className="mb-8">
            <h3 className="text-sm font-mono font-semibold text-[#e0e0e0] mb-4 flex items-center gap-2">
              <span className="text-[#58a6ff]">$</span>
              Quick Commands
            </h3>
            <div className="grid grid-cols-2 gap-3">
              {quickCommands.map((cmd, idx) => (
                <button
                  key={idx}
                  onClick={() => {
                    // Simulate command execution
                    onStart();
                  }}
                  className="group bg-[#111111] border border-[#2a2a2a] hover:border-[#58a6ff] p-4 rounded transition-all text-left animate-in"
                  style={{ animationDelay: `${(idx + 4) * 75}ms` }}
                >
                  <div className="flex items-start justify-between mb-2">
                    <span className="text-lg">{cmd.icon}</span>
                    <span className="text-[10px] font-mono text-[#666666] group-hover:text-[#58a6ff]">
                      {cmd.cmd}
                    </span>
                  </div>
                  <p className="text-sm text-[#e0e0e0] font-mono">{cmd.desc}</p>
                </button>
              ))}
            </div>
          </div>

          {/* Info Cards */}
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-[#111111] border border-[#2a2a2a] p-5 rounded animate-in delay-200">
              <div className="flex items-center gap-2 mb-3">
                <span className="text-[#00d26a]">●</span>
                <h4 className="text-sm font-mono font-semibold text-[#e0e0e0]">Local-First</h4>
              </div>
              <p className="text-xs text-[#888888] font-mono leading-relaxed">
                All data stored locally. Works offline. Fast, private, and always available.
                No cloud dependencies or API limits.
              </p>
            </div>

            <div className="bg-[#111111] border border-[#2a2a2a] p-5 rounded animate-in delay-200">
              <div className="flex items-center gap-2 mb-3">
                <span className="text-[#58a6ff]">●</span>
                <h4 className="text-sm font-mono font-semibold text-[#e0e0e0]">Terminal Interface</h4>
              </div>
              <p className="text-xs text-[#888888] font-mono leading-relaxed">
                Command-line interface for power users. Fast navigation, keyboard shortcuts,
                and AI-powered command completion.
              </p>
            </div>
          </div>

          {/* Keyboard Shortcuts */}
          <div className="mt-8 p-4 bg-[#0a0a0a] border border-[#2a2a2a] rounded">
            <h4 className="text-xs font-mono text-[#888888] uppercase tracking-wide mb-3">
              Keyboard Shortcuts
            </h4>
            <div className="grid grid-cols-2 gap-2">
              <div className="flex items-center gap-3">
                <kbd className="px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-[10px] font-mono text-[#e0e0e0]">
                  ⌘K
                </kbd>
                <span className="text-xs text-[#888888] font-mono">Command palette</span>
              </div>
              <div className="flex items-center gap-3">
                <kbd className="px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-[10px] font-mono text-[#e0e0e0]">
                  ⌘B
                </kbd>
                <span className="text-xs text-[#888888] font-mono">Toggle sidebar</span>
              </div>
              <div className="flex items-center gap-3">
                <kbd className="px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-[10px] font-mono text-[#e0e0e0]">
                  ⌘L
                </kbd>
                <span className="text-xs text-[#888888] font-mono">Clear terminal</span>
              </div>
              <div className="flex items-center gap-3">
                <kbd className="px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-[10px] font-mono text-[#e0e0e0]">
                  ↑↓
                </kbd>
                <span className="text-xs text-[#888888] font-mono">Navigate history</span>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-[#2a2a2a] px-6 py-3">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <p className="text-[10px] text-[#666666] font-mono">
            MosaicIQ v1.0.0 · Built with React + Tauri · Local Runtime
          </p>
          <p className="text-[10px] text-[#666666] font-mono">
            Press <kbd className="px-1.5 py-0.5 bg-[#1a1a1a] border border-[#2a2a2a] rounded">Enter</kbd> to start
          </p>
        </div>
      </footer>
    </div>
  );
};
