import { useState } from "react";
import { useDailyAnalysis } from "@/hooks/useDailyAnalysis";
import { Badge } from "@/components/ui/Badge";
import { RocketIndicator } from "@/components/ui/RocketIndicator";

export function DailyAnalysisPanel() {
  const [selectedDate, setSelectedDate] = useState(
    new Date().toISOString().split("T")[0]
  );

  const { data, loading, error } = useDailyAnalysis(selectedDate, 30);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">Loading analysis...</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-4 bg-destructive/10 text-destructive rounded-md">
        Error: {error}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Daily Analysis</h2>
        <input
          type="date"
          value={selectedDate}
          onChange={(e) => setSelectedDate(e.target.value)}
          className="px-3 py-2 border rounded-md"
        />
      </div>

      {data.length === 0 ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-muted-foreground">
            No analysis available for this date
          </div>
        </div>
      ) : (
        <div className="rounded-md border overflow-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b bg-muted/50">
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Symbol
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Score
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Price Change
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Flow Count
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Total Premium
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium">
                  Date
                </th>
              </tr>
            </thead>
            <tbody>
              {data.map((analysis, index) => (
                <tr
                  key={analysis.id || index}
                  className="border-b transition-colors hover:bg-muted/50"
                >
                  <td className="p-4 align-middle font-medium">
                    {analysis.symbol}
                  </td>
                  <td className="p-4 align-middle">
                    <RocketIndicator
                      score={analysis.final_score || analysis.score || 0}
                    />
                  </td>
                  <td className="p-4 align-middle">
                    <span
                      className={
                        (analysis.price_change_percent || 0) > 0
                          ? "text-green-500"
                          : "text-red-500"
                      }
                    >
                      {(analysis.price_change_percent || 0).toFixed(2)}%
                    </span>
                  </td>
                  <td className="p-4 align-middle">
                    {analysis.flow_count || 0}
                  </td>
                  <td className="p-4 align-middle">
                    ${((analysis.total_premium || 0) / 1000).toFixed(1)}k
                  </td>
                  <td className="p-4 align-middle text-xs text-muted-foreground">
                    {analysis.analysis_date || selectedDate}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

