'use client';

import React from 'react';
import {
  CheckCircle2,
  AlertTriangle,
  UploadCloud,
  FileCheck2,
  Clock,
  MapPin
} from 'lucide-react';

export interface ActivityItem {
  id: string;
  type: 'UPLOAD' | 'INCIDENT' | 'VERIFIED' | 'ACCREDITATION';
  title: string;
  location: string; // e.g. "Kawo Ward, Kaduna North"
  timeAgo: string; // e.g. "2m ago"
  status: 'SUCCESS' | 'WARNING' | 'INFO';
}

interface RecentActivityFeedProps {
  activities?: ActivityItem[];
  onViewAll?: () => void;
}

export function RecentActivityFeed({
  activities,
  onViewAll,
}: RecentActivityFeedProps) {
  const defaultActivities: ActivityItem[] = [
    {
      id: 'act-1',
      type: 'UPLOAD',
      title: 'PU 032 Kubau Rd Form EC8A Uploaded',
      location: 'Kawo Ward, Kaduna North, Kaduna',
      timeAgo: 'Just now',
      status: 'SUCCESS',
    },
    {
      id: 'act-2',
      type: 'VERIFIED',
      title: 'BVAS Accreditation Quorum Reached',
      location: 'Alausa Ward 01, Ikeja, Lagos',
      timeAgo: '3m ago',
      status: 'SUCCESS',
    },
    {
      id: 'act-3',
      type: 'INCIDENT',
      title: 'BVAS Biometric Verification Delays Reported',
      location: 'Dala Ward, Dala LGA, Kano',
      timeAgo: '8m ago',
      status: 'WARNING',
    },
    {
      id: 'act-4',
      type: 'UPLOAD',
      title: 'Ward Collation Summary Signed (EC8B)',
      location: 'Garki Village Ward, AMAC, FCT',
      timeAgo: '14m ago',
      status: 'SUCCESS',
    },
    {
      id: 'act-5',
      type: 'ACCREDITATION',
      title: 'Agent PIN Verified & Deployed',
      location: 'Oredo Ward 04, Benin, Edo',
      timeAgo: '22m ago',
      status: 'INFO',
    },
  ];

  const list = activities !== undefined ? activities : [];

  return (
    <div className="bg-white rounded-xl border border-slate-200/90 p-4 shadow-xs">
      <div className="flex items-center justify-between pb-3 border-b border-slate-100">
        <div>
          <h3 className="text-sm font-black text-slate-900 tracking-tight">
            Recent Activity Feed
          </h3>
          <p className="text-[11px] text-slate-500 font-medium">
            Live stream from field supervisors &amp; PU agents
          </p>
        </div>
        {onViewAll && (
          <button
            onClick={onViewAll}
            className="text-[11px] font-bold text-emerald-600 hover:text-emerald-700 underline"
          >
            View All
          </button>
        )}
      </div>

      <div className="mt-3.5 space-y-3">
        {list.length === 0 ? (
          <div className="py-7 px-4 text-center rounded-xl bg-slate-50 border border-dashed border-slate-200">
            <p className="text-xs font-bold text-slate-800">System Ready • Standing By</p>
            <p className="text-[11px] text-slate-500 mt-0.5">
              Live transmission feed awaiting field polling unit agent uploads.
            </p>
          </div>
        ) : (
          list.map((item) => {
          const iconConfig = {
            UPLOAD: {
              icon: UploadCloud,
              color: 'text-emerald-600 bg-emerald-50 border-emerald-200',
            },
            VERIFIED: {
              icon: FileCheck2,
              color: 'text-blue-600 bg-blue-50 border-blue-200',
            },
            INCIDENT: {
              icon: AlertTriangle,
              color: 'text-amber-600 bg-amber-50 border-amber-200',
            },
            ACCREDITATION: {
              icon: CheckCircle2,
              color: 'text-purple-600 bg-purple-50 border-purple-200',
            },
          }[item.type];

          const IconComponent = iconConfig.icon;

          return (
            <div
              key={item.id}
              className="flex items-start space-x-3 p-2 rounded-lg hover:bg-slate-50 transition-colors"
            >
              <div
                className={`w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 mt-0.5 ${iconConfig.color}`}
              >
                <IconComponent className="w-3.5 h-3.5" />
              </div>

              <div className="flex-1 min-w-0">
                <p className="text-xs font-bold text-slate-900 leading-snug truncate">
                  {item.title}
                </p>
                <div className="flex items-center space-x-2 text-[10px] text-slate-500 mt-0.5">
                  <span className="flex items-center gap-0.5 truncate">
                    <MapPin className="w-2.5 h-2.5 text-slate-400" />
                    {item.location}
                  </span>
                  <span>•</span>
                  <span className="flex items-center gap-0.5 shrink-0 font-mono">
                    <Clock className="w-2.5 h-2.5 text-slate-400" />
                    {item.timeAgo}
                  </span>
                </div>
              </div>
            </div>
          );
        }))}
      </div>
    </div>
  );
}