import { useState } from "react";

export default function StockViewer() {
  const [symbol, setSymbol] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [indicators, setIndicators] = useState<{
    sma: number;
    ema: number;
    rsi: number;
    macd: number;
  } | null>(null);

  const fetchIndicators = async () => {
    if (!symbol.trim()) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `/api/indicators?symbol=${encodeURIComponent(symbol.trim())}`
      );
      if (!res.ok) throw new Error("API error");
      const data = await res.json();
      setIndicators(data.indicators);
    } catch {
      setError("Failed to fetch indicators. Check the symbol and try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container mx-auto p-4 max-w-2xl">
      <h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
      <div className="flex gap-2 mb-4">
        <input
          type="text"
          value={symbol}
          onChange={(e) => setSymbol(e.target.value)}
          placeholder="Enter stock symbol (e.g. AAPL)"
          className="flex-1 border rounded p-2"
          onKeyDown={(e) => e.key === "Enter" && fetchIndicators()}
        />
        <button
          onClick={fetchIndicators}
          disabled={loading || !symbol.trim()}
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
        >
          {loading ? "Loading…" : "Get Indicators"}
        </button>
      </div>
      {error && <p className="text-red-600 mb-4">{error}</p>}
      {indicators && (
        <div className="bg-gray-50 rounded-lg p-4">
          <h2 className="text-lg font-semibold mb-2">
            Results for {symbol.toUpperCase()}
          </h2>
          <table className="w-full border-collapse">
            <thead>
              <tr className="border-b">
                <th className="text-left p-2 font-medium">Indicator</th>
                <th className="text-left p-2 font-medium">Value</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(indicators).map(([key, value]) => (
                <tr key={key} className="border-b">
                  <td className="p-2 capitalize">{key}</td>
                  <td className="p-2 font-mono">{value.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}