import React from 'react';
import { usePage } from '@inertiajs/react';
import { Toaster } from 'react-hot-toast';
import Card from '@/Components/Admin/ui/Card';

export default function Dashboard() {
  const { stats = {} } = usePage().props;
  const summaryCards = stats.summary_cards || [];
  const propertyStatusCounts = stats.property_status_counts || {};
  const pendingLandlords = stats.pending_landlords || [];
  const recentReports = stats.recent_reports || [];

  const statusBadgeClass = (status) => {
    const safe = (status || '').toLowerCase();
    if (safe.includes('pending')) return 'badge badge-warning';
    if (safe.includes('investigat')) return 'badge badge-info';
    if (safe.includes('resolve')) return 'badge badge-success';
    if (safe.includes('dismiss')) return 'badge badge-secondary';
    return 'badge badge-light';
  };

  return (
    <>
      <Toaster />
      <div className="row mt-4">
        {summaryCards.map((card, index) => (
          <Card key={index} name={card.name} icon={card.icon} value={card.value || 0} />
        ))}
      </div>

      <div className="row mt-4">
        <div className="col-lg-6">
          <div className="card">
            <div className="card-body">
              <h4 className="header-title">Property Status Overview</h4>
              <ul className="list-group list-group-flush mt-3">
                {Object.entries(propertyStatusCounts).map(([status, count]) => (
                  <li key={status} className="list-group-item d-flex justify-content-between align-items-center text-capitalize">
                    {status}
                    <span className="badge badge-primary badge-pill">{count}</span>
                  </li>
                ))}
                {Object.keys(propertyStatusCounts).length === 0 && (
                  <li className="list-group-item text-muted text-center">
                    No property data available
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>

        <div className="col-lg-6">
          <div className="card">
            <div className="card-body">
              <h4 className="header-title">Pending Landlords</h4>
              {pendingLandlords.length === 0 ? (
                <p className="text-muted mt-3">No pending landlord approvals.</p>
              ) : (
                <div className="table-responsive mt-3">
                  <table className="table table-hover mb-0">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Requested</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pendingLandlords.map((landlord) => (
                        <tr key={landlord.id}>
                          <td>{landlord.name}</td>
                          <td>{landlord.email}</td>
                          <td>{landlord.created_at}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="row mt-4">
        <div className="col-lg-12">
          <div className="card">
            <div className="card-body">
              <h4 className="header-title">Recent Reports</h4>
              {recentReports.length === 0 ? (
                <p className="text-muted mt-3">No recent reports.</p>
              ) : (
                <div className="table-responsive mt-3">
                  <table className="table table-hover mb-0">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Reason</th>
                        <th>Status</th>
                        <th>Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {recentReports.map((report) => (
                        <tr key={report.id}>
                          <td>#{report.id}</td>
                          <td>{report.reason}</td>
                          <td>
                            <span className={statusBadgeClass(report.status)}>
                              {report.status}
                            </span>
                          </td>
                          <td>{report.created_at}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
