'use client';

import Link from 'next/link';
import { Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

type AnalysisToolbarProps = {
  tickerInput: string;
  currentTicker: string;
  onTickerInputChange: (value: string) => void;
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
  onRefresh: () => void;
  quickLinks: {
    research: string;
    filings: string;
    financials: string;
    graphing: string;
  };
  onLinkPrefetch?: () => void;
};

export function AnalysisToolbar(props: AnalysisToolbarProps) {
  return (
    <form
      className="border-t border-[color:var(--line-weak)] pt-4"
      onSubmit={props.onSubmit}
    >
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div className="space-y-1">
          <p className="panel-heading text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Company overview</p>
          <h2 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Inspect the latest high-level picture for {props.currentTicker}</h2>
        </div>

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <Input
            value={props.tickerInput}
            aria-label="Overview ticker"
            onChange={(event) => props.onTickerInputChange(event.target.value.toUpperCase())}
            placeholder="Ticker (AAPL)"
            className="w-full sm:min-w-[180px]"
          />
          <Button type="submit">
            <Search className="size-4" />
            Load overview
          </Button>
          <Button type="button" variant="secondary" onClick={props.onRefresh}>
            Refresh
          </Button>
        </div>
      </div>

      <div className="mt-4 flex flex-wrap gap-2 text-sm">
        <Link href={props.quickLinks.research} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
          Research
        </Link>
        <Link href={props.quickLinks.filings} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
          Filings
        </Link>
        <Link href={props.quickLinks.financials} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
          Financials
        </Link>
        <Link href={props.quickLinks.graphing} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
          Graphing
        </Link>
      </div>
    </form>
  );
}