'use client';

import { useEffect, useState, useCallback } from 'react';
import { useForm } from 'react-hook-form';
import dealerApi from '@/lib/dealer-axios';

interface FilterForm { start_date: string; end_date: string; }
interface TopDevice { device_name?: string; unit_terjual?: number; total_claims?: number; approved_claims?: number; total_rrp?: number; }
interface TopOutlet { outlet_name?: string; city?: string; unit_terjual?: number; approved_claims?: number; total_rrp?: number; }
interface DashboardData { 
  active_stores?: number; 
  total_claims?: number; 
  approved_claims?: number; 
  pending_claims?: number; 
  total_rrp?: number; 
  outlets_count?: number; 
  top_devices?: TopDevice[]; 
  top_outlets?: TopOutlet[]; 
}

export default function DealerDashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const today = new Date().toISOString().slice(0, 10);
  const firstOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().slice(0, 10);
  const { register, handleSubmit, getValues } = useForm<FilterForm>({ defaultValues: { start_date: firstOfMonth, end_date: today } });

  const load = useCallback((f: FilterForm) => {
    setLoading(true);
    dealerApi.get(`/dealer/dashboard?start_date=${f.start_date}&end_date=${f.end_date}`)
      .then(r => {
        const responseData = r.data.data;
        // Ensure arrays are always arrays
        if (responseData) {
          responseData.top_devices = Array.isArray(responseData.top_devices) ? responseData.top_devices : [];
          responseData.top_outlets = Array.isArray(responseData.top_outlets) ? responseData.top_outlets : [];
        }
        setData(responseData);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

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

  const fmt = (n: number | null | undefined) => {
    if (n === null || n === undefined || isNaN(Number(n))) return 'Rp 0';
    return 'Rp ' + Number(n).toLocaleString('id-ID');
  };

  const stats = data ? [
    { label: 'Active Store', value: (data.active_stores ?? 0).toLocaleString('id-ID'), sub: 'Outlet dengan klaim', color: 'bg-blue-600' },
    { label: 'Total Klaim', value: (data.total_claims ?? 0).toLocaleString('id-ID'), sub: `${data.approved_claims ?? 0} disetujui`, color: 'bg-indigo-600' },
    { label: 'Total Amount', value: fmt(data.total_rrp), sub: `${data.approved_claims ?? 0} klaim disetujui`, color: 'bg-emerald-600' },
    { label: 'Total Outlet', value: (data.outlets_count ?? 0).toLocaleString('id-ID'), sub: 'Outlet aktif', color: 'bg-amber-600' },
  ] : [];

  return (
    <div>
      <h1 className="text-xl font-bold text-gray-800 mb-5">Dashboard</h1>
      <form onSubmit={handleSubmit(load)} className="bg-white rounded-xl shadow-sm p-4 mb-6 flex flex-wrap gap-3 items-end">
        <div><label className="block text-xs text-gray-500 mb-1">Dari</label><input {...register('start_date')} type="date" className="border rounded-lg px-3 py-2 text-sm" /></div>
        <div><label className="block text-xs text-gray-500 mb-1">Sampai</label><input {...register('end_date')} type="date" className="border rounded-lg px-3 py-2 text-sm" /></div>
        <button type="submit" className="bg-blue-700 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-800">Tampilkan</button>
      </form>

      {loading ? <div className="text-center py-12 text-gray-400">Memuat...</div> : !data ? <p className="text-gray-400">Gagal memuat data.</p> : (
        <>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
            {stats.map(s => (
              <div key={s.label} className={`${s.color} rounded-2xl p-4 text-white`}>
                <p className="text-xs opacity-80">{s.label}</p>
                <p className="text-2xl font-bold mt-1">{s.value}</p>
                <p className="text-xs opacity-70 mt-0.5">{s.sub}</p>
              </div>
            ))}
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="bg-white rounded-2xl shadow-sm p-6">
            <h2 className="text-base font-bold text-gray-800 mb-4">Top 10 Device</h2>
            {!data.top_devices || !Array.isArray(data.top_devices) || data.top_devices.length === 0 ? <p className="text-gray-400 text-sm text-center py-4">Belum ada data.</p> : (
              <div className="overflow-x-auto -mx-2 sm:mx-0">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs uppercase">
                      <th className="py-3 px-3 text-left rounded-tl-lg">#</th>
                      <th className="py-3 px-3 text-left">Perangkat</th>
                      <th className="py-3 px-3 text-right">Unit</th>
                      <th className="py-3 px-3 text-right rounded-tr-lg">Total Amount</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {data.top_devices.map((d, i) => (
                      <tr key={i} className="hover:bg-blue-50 transition">
                        <td className="py-3 px-3 text-gray-400 font-medium">{i + 1}</td>
                        <td className="py-3 px-3 font-medium text-gray-800">{d.device_name ?? '-'}</td>
                        <td className="py-3 px-3 text-right text-blue-600 font-bold">{(d.unit_terjual ?? 0).toLocaleString('id-ID')}</td>
                        <td className="py-3 px-3 text-right">
                          <span className="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md whitespace-nowrap">
                            Rp {(d.total_rrp ?? 0).toLocaleString('id-ID')}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            </div>

            <div className="bg-white rounded-2xl shadow-sm p-6">
              <h2 className="text-base font-bold text-gray-800 mb-4">Top 10 Penjualan Outlet</h2>
              {!data.top_outlets || !Array.isArray(data.top_outlets) || data.top_outlets.length === 0 ? <p className="text-gray-400 text-sm text-center py-4">Belum ada data.</p> : (
                <div className="overflow-x-auto -mx-2 sm:mx-0">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white text-xs uppercase">
                        <th className="py-3 px-3 text-left rounded-tl-lg">#</th>
                        <th className="py-3 px-3 text-left">Outlet</th>
                        <th className="py-3 px-3 text-left hidden sm:table-cell">Kota</th>
                        <th className="py-3 px-3 text-right">Unit</th>
                        <th className="py-3 px-3 text-right rounded-tr-lg">Total Amount</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100">
                      {data.top_outlets.map((o, i) => (
                        <tr key={i} className="hover:bg-indigo-50 transition">
                          <td className="py-3 px-3 text-gray-400 font-medium">{i + 1}</td>
                          <td className="py-3 px-3">
                            <div className="font-medium text-gray-800">{o.outlet_name ?? '-'}</div>
                            <div className="text-xs text-gray-500 sm:hidden mt-0.5">{o.city ?? '-'}</div>
                          </td>
                          <td className="py-3 px-3 text-gray-500 text-xs hidden sm:table-cell">{o.city ?? '-'}</td>
                          <td className="py-3 px-3 text-right text-indigo-600 font-bold">{(o.unit_terjual ?? 0).toLocaleString('id-ID')}</td>
                          <td className="py-3 px-3 text-right">
                            <span className="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md whitespace-nowrap">
                              Rp {(o.total_rrp ?? 0).toLocaleString('id-ID')}
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
}