'use client';

import { useEffect, useState, useCallback } from 'react';
import api from '@/lib/axios';
import { Package, Truck, CheckCircle2, XCircle, Clock } from 'lucide-react';
import { formatDate } from '@/lib/dateUtils';

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;
}

const statusConfig: 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: XCircle,      className: 'bg-red-100 text-red-700' },
};

export default function FulfillmentPage() {
  const [data, setData]       = useState<Fulfillment[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage]       = useState(1);
  const [lastPage, setLastPage] = useState(1);

  const load = useCallback(async (p = 1) => {
    setLoading(true);
    try {
      const res = await api.get(`/end-user/fulfillments?page=${p}`);
      setData(res.data.data ?? []);
      setPage(res.data.meta?.current_page ?? 1);
      setLastPage(res.data.meta?.last_page ?? 1);
    } catch {}
    finally { setLoading(false); }
  }, []);

  useEffect(() => { load(1); }, [load]);

  return (
    <div>
      <h1 className="text-xl font-bold text-gray-800 mb-6">Status Pengiriman Reward</h1>

      {loading ? (
        <div className="text-center py-12 text-gray-400 text-sm">Memuat...</div>
      ) : data.length === 0 ? (
        <div className="text-center py-12">
          <div className="text-4xl mb-3">📦</div>
          <p className="text-gray-500 text-sm">Belum ada reward yang perlu dikirim.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {data.map(f => {
            const st = statusConfig[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-3">
                  <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 && (
                  <div className="bg-gray-50 rounded-lg px-3 py-2 mb-2">
                    <p className="text-xs text-gray-500 font-medium mb-0.5">Catatan</p>
                    <p className="text-sm text-gray-700">{f.notes}</p>
                  </div>
                )}

                <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>
            );
          })}

          {lastPage > 1 && (
            <div className="flex justify-center gap-2 pt-2">
              <button disabled={page <= 1} onClick={() => load(page - 1)}
                className="px-3 py-1.5 text-sm rounded-lg border 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 disabled={page >= lastPage} onClick={() => load(page + 1)}
                className="px-3 py-1.5 text-sm rounded-lg border disabled:opacity-40 hover:bg-gray-50">Berikutnya →</button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}