'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { userReportsService, type UserReport, type ReportCounts } from '@/services/user-reports.service';
import { getErrorMessage } from '@/services';

function getUserName(user: UserReport['reporter']): string {
  const profile = user.userProfile || user.agentProfile;
  if (profile?.firstName || profile?.lastName) {
    return [profile.firstName, profile.lastName].filter(Boolean).join(' ');
  }
  return user.email;
}

const STATUS_COLORS: Record<string, string> = {
  PENDING: 'bg-yellow-100 text-yellow-800',
  REVIEWED: 'bg-blue-100 text-blue-800',
  RESOLVED: 'bg-green-100 text-green-800',
  DISMISSED: 'bg-gray-100 text-gray-800',
};

export default function ReportsPage() {
  const router = useRouter();
  const [reports, setReports] = useState<UserReport[]>([]);
  const [counts, setCounts] = useState<ReportCounts | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [selectedReport, setSelectedReport] = useState<UserReport | null>(null);
  const [adminNotes, setAdminNotes] = useState('');
  const [updatingId, setUpdatingId] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError('');
      const [reportsList, reportCounts] = await Promise.all([
        userReportsService.getAllReports(statusFilter || undefined),
        userReportsService.getReportCounts(),
      ]);
      setReports(reportsList);
      setCounts(reportCounts);
    } catch (err) {
      const msg = getErrorMessage(err);
      setError(msg);
      if (msg.includes('Unauthorized')) router.push('/login');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [statusFilter]);

  const handleUpdateStatus = async (reportId: string, status: string) => {
    try {
      setUpdatingId(reportId);
      const updated = await userReportsService.updateReport(reportId, status, adminNotes || undefined);
      setReports((prev) => prev.map((r) => (r.id === reportId ? updated : r)));
      setSelectedReport(null);
      setAdminNotes('');
      // Refresh counts
      const reportCounts = await userReportsService.getReportCounts();
      setCounts(reportCounts);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setUpdatingId(null);
    }
  };

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">User Reports</h1>

      {/* Status Counts */}
      {counts && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
          {[
            { label: 'Total', value: counts.total, color: 'bg-gray-50' },
            { label: 'Pending', value: counts.pending, color: 'bg-yellow-50' },
            { label: 'Reviewed', value: counts.reviewed, color: 'bg-blue-50' },
            { label: 'Resolved', value: counts.resolved, color: 'bg-green-50' },
            { label: 'Dismissed', value: counts.dismissed, color: 'bg-gray-50' },
          ].map((stat) => (
            <div key={stat.label} className={`${stat.color} rounded-lg p-4 border border-gray-200`}>
              <p className="text-sm text-gray-600">{stat.label}</p>
              <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
            </div>
          ))}
        </div>
      )}

      {/* Filter */}
      <div className="mb-4 flex items-center gap-3">
        <label className="text-sm font-medium text-gray-700">Filter by status:</label>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white"
        >
          <option value="">All</option>
          <option value="PENDING">Pending</option>
          <option value="REVIEWED">Reviewed</option>
          <option value="RESOLVED">Resolved</option>
          <option value="DISMISSED">Dismissed</option>
        </select>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg mb-4">
          <p className="text-red-700 text-sm">{error}</p>
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        </div>
      ) : reports.length === 0 ? (
        <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
          <p className="text-gray-500">No reports found</p>
        </div>
      ) : (
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reporter</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reported User</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {reports.map((report) => (
                <tr key={report.id} className="hover:bg-gray-50">
                  <td className="px-4 py-3">
                    <p className="text-sm font-medium text-gray-900">{getUserName(report.reporter)}</p>
                    <p className="text-xs text-gray-500">{report.reporter.email}</p>
                  </td>
                  <td className="px-4 py-3">
                    <p className="text-sm font-medium text-gray-900">{getUserName(report.reportedUser)}</p>
                    <p className="text-xs text-gray-500">{report.reportedUser.email}</p>
                  </td>
                  <td className="px-4 py-3">
                    <p className="text-sm text-gray-900">{report.reason}</p>
                    {report.description && (
                      <p className="text-xs text-gray-500 mt-1 truncate max-w-[200px]">{report.description}</p>
                    )}
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 text-xs font-semibold rounded-full ${STATUS_COLORS[report.status]}`}>
                      {report.status}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-500">
                    {new Date(report.createdAt).toLocaleDateString()}
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => {
                        setSelectedReport(report);
                        setAdminNotes(report.adminNotes || '');
                      }}
                      className="text-sm text-blue-600 hover:text-blue-800 font-medium"
                    >
                      Review
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Review Modal */}
      {selectedReport && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">Review Report</h3>
            </div>
            <div className="px-6 py-4 space-y-4">
              <div>
                <p className="text-sm font-medium text-gray-700">Reporter</p>
                <p className="text-sm text-gray-900">{getUserName(selectedReport.reporter)} ({selectedReport.reporter.email})</p>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-700">Reported User</p>
                <p className="text-sm text-gray-900">{getUserName(selectedReport.reportedUser)} ({selectedReport.reportedUser.email})</p>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-700">Reason</p>
                <p className="text-sm text-gray-900">{selectedReport.reason}</p>
              </div>
              {selectedReport.description && (
                <div>
                  <p className="text-sm font-medium text-gray-700">Description</p>
                  <p className="text-sm text-gray-900">{selectedReport.description}</p>
                </div>
              )}
              <div>
                <label className="text-sm font-medium text-gray-700 block mb-1">Admin Notes</label>
                <textarea
                  value={adminNotes}
                  onChange={(e) => setAdminNotes(e.target.value)}
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-500"
                  placeholder="Add notes about this report..."
                />
              </div>
            </div>
            <div className="px-6 py-4 border-t border-gray-200 flex flex-wrap gap-2 justify-end">
              <button
                onClick={() => { setSelectedReport(null); setAdminNotes(''); }}
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm"
              >
                Cancel
              </button>
              <button
                onClick={() => handleUpdateStatus(selectedReport.id, 'DISMISSED')}
                disabled={updatingId === selectedReport.id}
                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors text-sm disabled:opacity-50"
              >
                Dismiss
              </button>
              <button
                onClick={() => handleUpdateStatus(selectedReport.id, 'REVIEWED')}
                disabled={updatingId === selectedReport.id}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
              >
                Mark Reviewed
              </button>
              <button
                onClick={() => handleUpdateStatus(selectedReport.id, 'RESOLVED')}
                disabled={updatingId === selectedReport.id}
                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm disabled:opacity-50"
              >
                Resolve
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}