'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import api from '@/lib/axios';
import { Trophy, Gift, Package, Truck, CheckCircle2, Clock } from 'lucide-react';
import { PointExpiryWarning } from '@/components/PointExpiryWarning';
import { formatDate, formatTimestamp } from '@/lib/dateUtils';

interface ClaimReward {
  id: number; imei: string; reward_method: string; lottery_number?: string;
  points_awarded?: number; reward_data?: { reward_name?: string; reward_value?: number; [key: string]: any; } | null;
  is_winner?: boolean; processed_at: string;
  promotion?: { id: number; name: string };
  device_model?: { model_name: string; brand: string };
}

interface RedeemedItem {
  id: number; item_name: string; image_url: string | null;
  points_used: number; status: 'open' | 'closed'; redeemed_at: string;
}

interface Fulfillment {
  id: number; source_label: string; promotion_name: string | null;
  reward_method: string; reward_name: string; reward_value: number | null;
  status: string; delivery_method: string | null; tracking_number: string | null;
  notes: string | null; delivered_at: string | null; created_at: string;
}

interface UserProfile {
  point_expiry_date?: string;
  point_expiry_date_formatted?: string;
  points_expired?: boolean;
  days_until_expiry?: number;
  expiry_warning?: boolean;
}

const rewardMethodLabel: Record<string, string> = {
  hadiah_langsung: 'Hadiah Langsung', undian: 'Undian', point_reward: 'Point Reward',
};
const rewardMethodColor: Record<string, string> = {
  hadiah_langsung: 'bg-green-100 text-green-700', undian: 'bg-purple-100 text-purple-700', point_reward: 'bg-blue-100 text-blue-700',
};
const fulfillmentStatus: Record<string, { label: string; icon: any; className: string }> = {
  pending:    { label: 'Menunggu',   icon: Clock,        className: 'bg-yellow-100 text-yellow-700' },
  processing: { label: 'Diproses',   icon: Package,      className: 'bg-blue-100 text-blue-700' },
  delivered:  { label: 'Terkirim',   icon: CheckCircle2, className: 'bg-green-100 text-green-700' },
  cancelled:  { label: 'Dibatalkan', icon: Truck,        className: 'bg-red-100 text-red-700' },
};

function Pagination({ page, lastPage, onChange }: { page: number; lastPage: number; onChange: (p: number) => void }) {
  if (lastPage <= 1) return null;
  return (
    <div className="flex justify-center gap-2 mt-6">
      <button onClick={() => onChange(page - 1)} disabled={page <= 1} className="px-3 py-1.5 text-sm border rounded-lg disabled:opacity-40 hover:bg-gray-50">← Sebelumnya</button>
      <span className="px-3 py-1.5 text-sm text-gray-500">{page} / {lastPage}</span>
      <button onClick={() => onChange(page + 1)} disabled={page >= lastPage} className="px-3 py-1.5 text-sm border rounded-lg disabled:opacity-40 hover:bg-gray-50">Berikutnya →</button>
    </div>
  );
}

export default function RewardsPage() {
  const [tab, setTab] = useState<'claims' | 'redeemed' | 'fulfillment'>('claims');
  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);

  const [claimRewards, setClaimRewards]   = useState<ClaimReward[]>([]);
  const [claimLoading, setClaimLoading]   = useState(true);
  const [claimPage, setClaimPage]         = useState(1);
  const [claimLastPage, setClaimLastPage] = useState(1);

  const [redeemedItems, setRedeemedItems]     = useState<RedeemedItem[]>([]);
  const [redeemedLoading, setRedeemedLoading] = useState(true);
  const [redeemedPage, setRedeemedPage]       = useState(1);
  const [redeemedLastPage, setRedeemedLastPage] = useState(1);

  const [fulfillments, setFulfillments]       = useState<Fulfillment[]>([]);
  const [fulfillLoading, setFulfillLoading]   = useState(false);
  const [fulfillPage, setFulfillPage]         = useState(1);
  const [fulfillLastPage, setFulfillLastPage] = useState(1);

  const loadClaims = useCallback((p: number) => {
    setClaimLoading(true);
    api.get(`/end-user/rewards?page=${p}`).then(r => { setClaimRewards(r.data.data ?? []); setClaimLastPage(r.data.meta?.last_page ?? 1); }).catch(() => {}).finally(() => setClaimLoading(false));
  }, []);

  const loadRedeemed = useCallback((p: number) => {
    setRedeemedLoading(true);
    api.get(`/end-user/reward-items/my-items?page=${p}`).then(r => { setRedeemedItems(r.data.data ?? []); setRedeemedLastPage(r.data.meta?.last_page ?? 1); }).catch(() => {}).finally(() => setRedeemedLoading(false));
  }, []);

  const loadFulfillments = useCallback((p: number) => {
    setFulfillLoading(true);
    api.get(`/end-user/fulfillments?page=${p}`).then(r => { setFulfillments(r.data.data ?? []); setFulfillLastPage(r.data.meta?.last_page ?? 1); }).catch(() => {}).finally(() => setFulfillLoading(false));
  }, []);

  useEffect(() => {
    // Load user profile for expiry info
    api.get('/end-user/profile').then(r => {
      setUserProfile(r.data.data);
    }).catch(() => {});
  }, []);

  useEffect(() => { loadClaims(claimPage); }, [claimPage, loadClaims]);
  useEffect(() => { loadRedeemed(redeemedPage); }, [redeemedPage, loadRedeemed]);
  useEffect(() => { if (tab === 'fulfillment') loadFulfillments(fulfillPage); }, [tab, fulfillPage, loadFulfillments]);

  return (
    <div>
      <h1 className="text-xl font-bold text-gray-800 mb-5">Hadiah Saya</h1>

      {/* Point Expiry Warning */}
      {userProfile?.point_expiry_date && (
        <div className="mb-6">
          <PointExpiryWarning
            expiryDate={userProfile.point_expiry_date}
            expiryDateFormatted={userProfile.point_expiry_date_formatted || userProfile.point_expiry_date}
            daysUntilExpiry={userProfile.days_until_expiry || 0}
            isExpired={userProfile.points_expired || false}
            expiryWarning={userProfile.expiry_warning || false}
          />
        </div>
      )}

      {/* Tabs */}
      <div className="flex gap-1 bg-gray-100 rounded-xl p-1 mb-6 w-fit">
        {([['claims', 'Dari Klaim'], ['redeemed', 'Tukar Poin'], ['fulfillment', 'Status Pengiriman']] as const).map(([key, label]) => (
          <button key={key} onClick={() => setTab(key)}
            className={`px-3 py-2 text-sm font-medium rounded-lg transition whitespace-nowrap ${tab === key ? 'bg-white text-blue-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
            {label}
          </button>
        ))}
      </div>

      {/* Claim Rewards Tab */}
      {tab === 'claims' && (
        claimLoading ? (
          <div className="space-y-3">{[1,2,3].map(i => <div key={i} className="bg-white rounded-xl p-4 animate-pulse h-20" />)}</div>
        ) : claimRewards.length === 0 ? (
          <div className="text-center py-16 text-gray-400">
            <div className="text-4xl mb-3">📭</div>
            <p className="text-sm">Belum ada hadiah dari klaim.</p>
            <Link href="/dashboard/claim"
              className="mt-4 inline-block bg-blue-700 text-white px-5 py-2 rounded-lg text-sm hover:bg-blue-800">
              Klaim Sekarang
            </Link>
          </div>
        ) : (
          <>
            <div className="space-y-3">
              {claimRewards.map((r) => (
                <div key={r.id} className="bg-white rounded-xl shadow-sm p-4">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-gray-800 truncate">{r.promotion?.name ?? '-'}</p>
                      <p className="text-xs text-gray-500 mt-0.5">
                        {r.device_model ? `${r.device_model.brand} ${r.device_model.model_name}` : '-'} · IMEI: {r.imei}
                      </p>

                      {/* Hadiah Langsung */}
                      {r.reward_method === 'hadiah_langsung' && r.reward_data?.reward_name && (
                        <div className="mt-2 bg-yellow-50 border border-yellow-100 rounded-lg px-3 py-2">
                          <p className="text-xs text-yellow-600 font-medium">Hadiah</p>
                          <p className="text-sm font-semibold text-yellow-800">{r.reward_data.reward_name}</p>
                          {r.reward_data.reward_value != null && r.reward_data.reward_value > 0 && (
                            <p className="text-xs text-yellow-700">Senilai Rp {r.reward_data.reward_value.toLocaleString('id-ID')}</p>
                          )}
                        </div>
                      )}

                      {/* Undian */}
                      {r.lottery_number && (
                        <p className="text-xs text-purple-600 mt-1.5">
                          Nomor Undian: <strong>{r.lottery_number}</strong>
                          {r.is_winner && (
                            <span className="ml-2 inline-flex items-center gap-0.5 text-amber-600 font-semibold">
                              <Trophy className="w-3 h-3" /> Pemenang!
                            </span>
                          )}
                        </p>
                      )}
                      {r.reward_method === 'undian' && r.promotion && (
                        <Link href={`/dashboard/lottery/${r.promotion.id}`}
                          className="text-xs text-purple-600 hover:underline mt-1 inline-block">
                          Lihat daftar pemenang →
                        </Link>
                      )}

                      {/* Point Reward */}
                      {r.points_awarded != null && r.points_awarded > 0 && (
                        <p className="text-xs text-blue-600 mt-1">Poin diterima: <strong>+{r.points_awarded}</strong></p>
                      )}

                      <p className="text-xs text-gray-400 mt-1.5">{formatDate(r.processed_at)}</p>
                    </div>
                    <span className={`flex-shrink-0 text-xs px-2 py-1 rounded-full font-medium ${rewardMethodColor[r.reward_method] ?? 'bg-gray-100 text-gray-600'}`}>
                      {rewardMethodLabel[r.reward_method] ?? r.reward_method}
                    </span>
                  </div>
                </div>
              ))}
            </div>

            <Pagination page={claimPage} lastPage={claimLastPage} onChange={setClaimPage} />
          </>
        )
      )}

      {/* Redeemed Items Tab */}
      {tab === 'redeemed' && (
        redeemedLoading ? (
          <div className="space-y-3">{[1,2,3].map(i => <div key={i} className="bg-white rounded-xl p-4 animate-pulse h-20" />)}</div>
        ) : redeemedItems.length === 0 ? (
          <div className="text-center py-16 text-gray-400">
            <Gift className="w-12 h-12 mx-auto mb-3 opacity-30" />
            <p className="text-sm">Belum ada item yang ditukar.</p>
            <Link href="/dashboard/redeem"
              className="mt-4 inline-block bg-blue-700 text-white px-5 py-2 rounded-lg text-sm hover:bg-blue-800">
              Tukar Poin
            </Link>
          </div>
        ) : (
          <>
            <div className="space-y-3">
              {redeemedItems.map((item) => (
                <div key={item.id} className="bg-white rounded-xl shadow-sm p-4 flex items-center gap-4">
                  {item.image_url ? (
                    <img src={item.image_url} alt={item.item_name}
                      className="w-12 h-12 rounded-lg object-cover flex-shrink-0" />
                  ) : (
                    <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                      <Package className="w-5 h-5 text-gray-400" />
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-gray-800">{item.item_name}</p>
                    <p className="text-xs text-gray-500 mt-0.5">
                      {item.points_used.toLocaleString('id-ID')} poin · {formatDate(item.redeemed_at)}
                    </p>
                  </div>
                  <span className={`flex-shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full
                    ${item.status === 'open' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                    {item.status === 'open' ? 'Open' : 'Closed'}
                  </span>
                </div>
              ))}
            </div>

            <Pagination page={redeemedPage} lastPage={redeemedLastPage} onChange={setRedeemedPage} />
          </>
        )
      )}

      {/* Status Pengiriman Tab */}
      {tab === 'fulfillment' && (
        fulfillLoading ? (
          <div className="space-y-3">{[1,2,3].map(i => <div key={i} className="bg-white rounded-xl p-4 animate-pulse h-20" />)}</div>
        ) : fulfillments.length === 0 ? (
          <div className="text-center py-16 text-gray-400">
            <Truck className="w-12 h-12 mx-auto mb-3 opacity-30" />
            <p className="text-sm">Belum ada hadiah yang perlu dikirim.</p>
          </div>
        ) : (
          <>
            <div className="space-y-3">
              {fulfillments.map(f => {
                const st = fulfillmentStatus[f.status] ?? { label: f.status, icon: Package, className: 'bg-gray-100 text-gray-500' };
                const Icon = st.icon;
                return (
                  <div key={f.id} className="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
                    <div className="flex items-start justify-between gap-3 mb-2">
                      <div className="flex-1 min-w-0">
                        <p className="font-semibold text-gray-800 text-sm">{f.reward_name}</p>
                        {f.reward_value && <p className="text-xs text-gray-500 mt-0.5">Nilai: Rp {f.reward_value.toLocaleString('id-ID')}</p>}
                        {f.promotion_name && <p className="text-xs text-gray-400 mt-0.5">Promosi: {f.promotion_name}</p>}
                      </div>
                      <span className={`flex items-center gap-1.5 flex-shrink-0 text-xs px-2.5 py-1 rounded-full font-medium ${st.className}`}>
                        <Icon className="w-3.5 h-3.5" />{st.label}
                      </span>
                    </div>
                    {f.tracking_number && (
                      <div className="bg-blue-50 border border-blue-200 rounded-lg px-3 py-2 mb-2">
                        <p className="text-xs text-blue-600 font-medium mb-0.5">Nomor Resi</p>
                        <p className="text-sm font-mono text-blue-800">{f.tracking_number}</p>
                      </div>
                    )}
                    {f.notes && <p className="text-xs text-gray-500 bg-gray-50 rounded-lg px-3 py-2 mb-2">{f.notes}</p>}
                    <div className="flex items-center justify-between pt-2 border-t border-gray-50 text-xs text-gray-400">
                      <span>{f.source_label}</span>
                      <span>{formatDate(f.created_at)}</span>
                    </div>
                  </div>
                );
              })}
            </div>
            <Pagination page={fulfillPage} lastPage={fulfillLastPage} onChange={setFulfillPage} />
          </>
        )
      )}
    </div>
  );
}