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-info' },
    { label: 'Positions', value: '8', color: 'text-positive' },
    { label: 'Watchlist', value: '24', color: 'text-warning' },
    { label: 'Gain', value: '+12.4%', color: 'text-positive' },
  ];

  return (
    <div className="flex h-screen flex-col bg-term-bg">
      {/* Header */}
      <header className="border-b border-term-border px-6 py-4">
        <div className="mx-auto flex max-w-6xl items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-info to-positive text-lg font-bold text-term-bg">
              M
            </div>
            <div>
              <h1 className="text-lg font-mono font-bold text-term-text">MosaicIQ</h1>
              <p className="text-[10px] font-mono text-term-text-muted">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-term-text-muted">
              <span className="h-2 w-2 animate-pulse rounded-full bg-positive"></span>
              Local Runtime Active
            </div>
            <button
              onClick={onStart}
              className="rounded border border-term-border bg-term-highlight px-4 py-2 text-xs font-mono text-term-text transition-all hover:border-info hover:bg-term-surface"
            >
              Enter Terminal
            </button>
          </div>
        </div>
      </header>

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

          {/* Stats Grid */}
          <div className="mb-8 grid grid-cols-4 gap-4">
            {stats.map((stat, idx) => (
              <div
                key={idx}
                className="animate-in rounded border border-term-border bg-term-surface p-4 transition-all hover:border-term-border-focus"
                style={{ animationDelay: `${idx * 75}ms` }}
              >
                <p className="mb-1 text-[10px] font-mono uppercase tracking-wide text-term-text-muted">
                  {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="mb-4 flex items-center gap-2 text-sm font-mono font-semibold text-term-text">
              <span className="text-info">$</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 animate-in rounded border border-term-border bg-term-surface p-4 text-left transition-all hover:border-info"
                  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-term-text-tertiary group-hover:text-info">
                      {cmd.cmd}
                    </span>
                  </div>
                  <p className="text-sm font-mono text-term-text">{cmd.desc}</p>
                </button>
              ))}
            </div>
          </div>

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

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

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

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