import { useEffect, useMemo, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export default function VoteWidget({ options }: { options: { id: string; label: string }[] }) {
  const key = "aethex_roadmap_votes_v1";
  const [votes, setVotes] = useState<Record<string, number>>({});
  const [choice, setChoice] = useState<string | null>(null);

  useEffect(() => {
    try {
      const raw = localStorage.getItem(key);
      if (raw) setVotes(JSON.parse(raw));
    } catch {}
  }, []);

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(votes));
    } catch {}
  }, [votes]);

  const total = useMemo(() => Object.values(votes).reduce((a, b) => a + b, 0), [votes]);

  const vote = (id: string) => {
    setChoice(id);
    setVotes((m) => ({ ...m, [id]: (m[id] || 0) + 1 }));
  };

  const reset = () => {
    setChoice(null);
    setVotes({});
  };

  return (
    <Card className="bg-card/60 border-border/40 backdrop-blur">
      <CardHeader>
        <CardTitle>What should we ship next?</CardTitle>
        <CardDescription>Local voting preview. Public voting will sync later.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="grid gap-2 md:grid-cols-2">
          {options.map((o) => {
            const pct = total ? Math.round(((votes[o.id] || 0) / total) * 100) : 0;
            return (
              <div key={o.id} className="flex items-center justify-between rounded border border-border/40 p-3">
                <div>
                  <div className="text-sm font-medium">{o.label}</div>
                  <div className="mt-1 h-1.5 w-40 rounded bg-border/50 overflow-hidden">
                    <div className="h-full bg-gradient-to-r from-aethex-500 to-neon-blue" style={{ width: `${pct}%` }} />
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant="outline">{pct}%</Badge>
                  <Button size="sm" variant={choice === o.id ? "outline" : "default"} onClick={() => vote(o.id)}>
                    {choice === o.id ? "Voted" : "Vote"}
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={reset}>Reset votes</Button>
          <div className="text-xs text-muted-foreground">Votes are stored locally on your device.</div>
        </div>
      </CardContent>
    </Card>
  );
}
