'use client';

import { Incident } from '@/lib/db/incident';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { IncidentForm, IncidentFormValues } from './IncidentForm';
import { IncidentHeader } from './IncidentHeader';
import { IncidentHotspots } from './IncidentHotspots';
import { IncidentList } from './IncidentList';
import { IncidentNews } from './IncidentNews';
import { IncidentStats } from './IncidentStats';

interface IncidentClientProps {
  incidents: Incident[];
  divisionMap: Record<string, string>;
}

export function IncidentClient({ incidents, divisionMap }: IncidentClientProps) {
  const [incidentList, setIncidentList] = useState<Incident[]>(incidents);
  const [selectedDivision, setSelectedDivision] = useState('all');
  const [selectedSort, setSelectedSort] = useState<'latest' | 'oldest'>('latest');

  const stats = useMemo(() => {
    const total = incidentList.length;
    const verified = incidentList.filter((i) => i.status === 'যাচাইকৃত').length;
    const pending = incidentList.filter(
      (i) =>
        i.status === 'অপেক্ষমান' || i.status === 'যাচাই প্রক্রিয়াধীন' || i.status === 'তদন্তাধীন',
    ).length;
    const riskCount = incidentList.filter((i) => ['সহিংসতা', 'হুমকি'].includes(i.category)).length;

    return { total, verified, pending, riskCount };
  }, [incidentList]);

  const hotspots = useMemo(() => {
    const counts: Record<string, number> = {};
    incidentList.forEach((incident) => {
      const area = incident.location.split(',')[0]?.trim();
      if (!area) return;
      counts[area] = (counts[area] || 0) + 1;
    });

    return Object.entries(counts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 3);
  }, [incidentList]);

  const filteredIncidents = useMemo(() => {
    let data = [...incidentList];
    if (selectedDivision !== 'all') {
      const bnDivision = divisionMap[selectedDivision];
      if (bnDivision) {
        data = data.filter((i) => i.location.includes(bnDivision));
      }
    }

    data.sort((a, b) => {
      if (selectedSort === 'latest') return b.timestamp - a.timestamp;
      return a.timestamp - b.timestamp;
    });

    return data;
  }, [incidentList, selectedDivision, selectedSort, divisionMap]);

  const inferCategory = (text: string, type: string): string => {
    if (text.includes('মারামারি') || text.includes('হামলা') || type.includes('সহিংসতা'))
      return 'সহিংসতা';
    if (text.includes('বাধা') || text.includes('ভয়') || type.includes('হুমকি')) return 'হুমকি';
    if (text.includes('পোস্টার') || text.includes('টাকা') || type.includes('আচরণবিধি'))
      return 'আচরণবিধি';
    return 'সাধারণ অভিযোগ';
  };

  const handleSubmit = async (data: IncidentFormValues) => {
    const category = inferCategory(data.description, data.incidentType);
    const newIncident: Incident = {
      id: Date.now(),
      title: data.title,
      location: data.incidentArea,
      time: 'এইমাত্র',
      timestamp: Date.now(),
      description: data.description,
      category,
      status: 'যাচাই প্রক্রিয়াধীন',
      statusColor: 'bg-gray-100 text-gray-600',
      image: null,
      isNew: true,
    };

    setIncidentList((prev) => [newIncident, ...prev]);
    setSelectedDivision('all');
    setSelectedSort('latest');
    toast.success('অভিযোগ সফলভাবে জমা হয়েছে');
    return true;
  };

  return (
    <>
      <IncidentHeader />

      <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 py-6 sm:py-8 md:py-12">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
          <div className="lg:col-span-3 order-2 lg:order-1">
            <div className="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-100 p-4 sm:p-6 md:p-8">
              <div className="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-6 md:mb-8">
                <div>
                  <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">
                    নতুন অভিযোগ জমা দিন
                  </h2>
                  <p className="text-gray-500 text-xs sm:text-sm">
                    নির্বাচনী সহিংসতা বা অনিয়মের তথ্য প্রমাণসহ রিপোর্ট করুন
                  </p>
                </div>
              </div>

              <IncidentForm onSubmit={handleSubmit} />
            </div>
          </div>

          <div className="lg:col-span-1 space-y-3 sm:space-y-4 order-1 lg:order-2">
            <IncidentStats stats={stats} />
            <IncidentHotspots hotspots={hotspots} />

            <div className="hidden lg:block bg-linear-to-br from-gray-50 to-gray-100 p-4 rounded-2xl border border-gray-200">
              <div className="flex items-center gap-2 mb-3">
                <span className="material-symbols-outlined text-gray-600">contact_support</span>
                <h4 className="font-bold text-gray-900 text-sm">প্রয়োজনে সাহায্য</h4>
              </div>
              <ul className="space-y-2 text-xs text-gray-600">
                <li className="flex items-start gap-2">
                  <span className="material-symbols-outlined text-sm text-green-500">
                    check_circle
                  </span>
                  <span>সঠিক তথ্য দিয়ে অভিযোগ জমা দিন</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="material-symbols-outlined text-sm text-green-500">
                    check_circle
                  </span>
                  <span>প্রমাণসহ রিপোর্ট করুন</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="material-symbols-outlined text-sm text-green-500">
                    check_circle
                  </span>
                  <span>আপনার পরিচয় গোপন থাকবে</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <IncidentNews />

        <IncidentList
          filteredIncidents={filteredIncidents}
          divisionMap={divisionMap}
          selectedDivision={selectedDivision}
          setSelectedDivision={setSelectedDivision}
          selectedSort={selectedSort}
          setSelectedSort={setSelectedSort}
        />
      </div>
    </>
  );
}