'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface QuestionResult {
  id: number
  question: string
  options: string
  votes: string[] // array of answer strings
}

interface Props {
  questions: QuestionResult[]
}

export function PollResultsView({ questions }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Results</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {questions.map((q) => {
          const options = q.options.split('\n').filter(Boolean)
          const totalVotes = q.votes.length

          // Count votes per option
          const voteCounts = new Map<string, number>()
          for (const opt of options) voteCounts.set(opt, 0)
          for (const vote of q.votes) {
            voteCounts.set(vote, (voteCounts.get(vote) ?? 0) + 1)
          }

          return (
            <div key={q.id}>
              <h4 className="text-sm font-medium mb-3">{q.question}</h4>
              {options.length > 0 ? (
                <div className="space-y-2">
                  {options.map((opt) => {
                    const count = voteCounts.get(opt) ?? 0
                    const pct = totalVotes > 0 ? Math.round((count / totalVotes) * 100) : 0
                    return (
                      <div key={opt}>
                        <div className="flex justify-between text-xs mb-1">
                          <span>{opt}</span>
                          <span className="text-muted-foreground">
                            {count} votes ({pct}%)
                          </span>
                        </div>
                        <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
                          <div
                            className="h-full rounded-full bg-primary transition-all"
                            style={{ width: `${pct}%` }}
                          />
                        </div>
                      </div>
                    )
                  })}
                </div>
              ) : (
                <div className="text-sm text-muted-foreground">
                  {totalVotes} free-text responses
                </div>
              )}
              <p className="text-xs text-muted-foreground mt-2">
                {totalVotes} total vote{totalVotes !== 1 ? 's' : ''}
              </p>
            </div>
          )
        })}
      </CardContent>
    </Card>
  )
}