'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import api from '@/lib/axios';
import { Trophy, ArrowLeft, Calendar } from 'lucide-react';
import { formatDate } from '@/lib/dateUtils';

interface Winner {
  lottery_number: string;
  winner_name: string;
  winner_announced_at: string | null;
  device_model: string;
  prize_name: string | null;
}

interface LotteryData {
  promotion: { id: number; name: string; draw_date: string | null };
  winners: Winner[];
}

export default function LotteryWinnersPage() {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<LotteryData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    api.get(`/end-user/promotions/${id}/winners`)
      .then((r) => setData(r.data.data))
      .catch(() => setError('Gagal memuat data pemenang.'))
      .finally(() => setLoading(false));
  }, [id]);

  return (
    <div>
      <div className="flex items-center gap-3 mb-6">
        <Link href="/dashboard/rewards" className="text-gray-400 hover:text-gray-600">
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <h1 className="text-xl font-bold text-gray-800">Pemenang Undian</h1>
      </div>

      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="bg-white rounded-xl p-4 animate-pulse h-16" />
          ))}
        </div>
      ) : error ? (
        <div className="text-center py-16 text-red-400">
          <p>{error}</p>
        </div>
      ) : data ? (
        <>
          {/* Promotion info */}
          <div className="bg-purple-50 border border-purple-100 rounded-xl p-4 mb-6">
            <p className="font-semibold text-purple-800">{data.promotion.name}</p>
            {data.promotion.draw_date && (
              <p className="text-xs text-purple-600 mt-1 flex items-center gap-1">
                <Calendar className="w-3 h-3" />
                Tanggal Undian: {formatDate(data.promotion.draw_date)}
              </p>
            )}
          </div>

          {data.winners.length === 0 ? (
            <div className="text-center py-16 text-gray-400">
              <Trophy className="w-12 h-12 mx-auto mb-3 opacity-30" />
              <p>Pengundian belum dilakukan.</p>
            </div>
          ) : (
            <div className="space-y-3">
              {data.winners.map((w, i) => (
                <div key={w.lottery_number} className="bg-white rounded-xl shadow-sm p-4 flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                    <Trophy className="w-5 h-5 text-purple-600" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-gray-800">{w.winner_name}</p>
                    <p className="text-xs text-purple-600">No. Undian: <strong>{w.lottery_number}</strong></p>
                    {w.prize_name && (
                      <p className="text-xs text-amber-600 font-medium mt-0.5">🎁 {w.prize_name}</p>
                    )}
                    <p className="text-xs text-gray-400">{w.device_model}</p>
                  </div>
                  {w.winner_announced_at && (
                    <span className="text-xs text-gray-400 flex-shrink-0">
                      {formatDate(w.winner_announced_at)}
                    </span>
                  )}
                </div>
              ))}
            </div>
          )}
        </>
      ) : null}
    </div>
  );
}