import React, { useState, useEffect } from 'react';
import { History, Zap, Building2, Calendar, X, Plus } from 'lucide-react';
import { Outage, Building } from '../../types';
import { backendApi } from '../../services/apiClient';
import { CreateOutageCard } from './CreateOutageCard';
import { OutageCardDetail } from './OutageCardDetail';

interface Props {
  /** В режиме "по дому" передать buildingId — показываем только по этому дому и кнопка История по этому дому */
  buildingId?: string;
  /** Компактный вид для блока в сводке дома */
  compact?: boolean;
}

export const OutagesJournal: React.FC<Props> = ({ buildingId, compact }) => {
  const [activeOutages, setActiveOutages] = useState<Outage[]>([]);
  const [historyOpen, setHistoryOpen] = useState(false);
  const [historyOutages, setHistoryOutages] = useState<Outage[]>([]);
  const [historyBuildingFilter, setHistoryBuildingFilter] = useState<string>(buildingId || '');
  const [buildings, setBuildings] = useState<Building[]>([]);
  const [loading, setLoading] = useState(true);
  const [historyLoading, setHistoryLoading] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [openOutageId, setOpenOutageId] = useState<number | null>(null);

  const fetchActive = () => {
    setLoading(true);
    backendApi
      .getOutages(buildingId ? { buildingId, active: true } : { active: true })
      .then(setActiveOutages)
      .catch(() => setActiveOutages([]))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    fetchActive();
  }, [buildingId]);

  useEffect(() => {
    if (historyOpen) {
      backendApi.getBuildings().then(setBuildings).catch(() => setBuildings([]));
      if (!buildingId) setHistoryBuildingFilter('');
    }
  }, [historyOpen, buildingId]);

  const loadHistory = () => {
    setHistoryLoading(true);
    const filter = buildingId || historyBuildingFilter;
    const params = filter ? { buildingId: filter } : undefined;
    backendApi
      .getOutages(params)
      .then(setHistoryOutages)
      .catch(() => setHistoryOutages([]))
      .finally(() => setHistoryLoading(false));
  };

  useEffect(() => {
    if (historyOpen) loadHistory();
  }, [historyOpen, historyBuildingFilter, buildingId]);

  const formatDate = (s: string) => {
    const d = new Date(s);
    return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
  };

  const title = buildingId ? 'Журнал отключений' : 'Журнал отключений';
  const subtitle = buildingId ? 'По этому дому' : 'Активные по всем домам';

  return (
    <div className="space-y-4 animate-fade-in">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <div>
          <h4 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em] px-1">{title}</h4>
          <p className="text-xs text-slate-400 mt-0.5">{subtitle}</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setCreateOpen(true)}
            className="inline-flex items-center gap-2 px-3 py-2 text-[10px] font-black uppercase tracking-wider text-white bg-primary-600 hover:bg-primary-700 rounded-xl transition-colors shadow-sm"
          >
            <Plus className="w-3.5 h-3.5" /> Новая запись
          </button>
          <button
            type="button"
            onClick={() => setHistoryOpen(true)}
            className="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors"
          >
            <History className="w-3.5 h-3.5" /> История
          </button>
        </div>
      </div>

      {loading ? (
        <p className="text-sm text-slate-400 py-6">Загрузка…</p>
      ) : activeOutages.length === 0 ? (
        <p className="text-sm text-slate-400 py-6 italic">Нет активных отключений</p>
      ) : (
        <ul className={`space-y-2 ${compact ? '' : 'space-y-3'}`}>
          {activeOutages.map((o) => (
            <li
              key={o.id}
              onClick={() => setOpenOutageId(o.id)}
              className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm flex flex-col sm:flex-row sm:items-center gap-3 cursor-pointer hover:border-primary-300 hover:shadow-md transition-all"
            >
              <div className="flex-1 min-w-0">
                {!buildingId && o.buildingAddress && (
                  <p className="text-xs font-bold text-slate-500 flex items-center gap-1">
                    <Building2 className="w-3.5 h-3.5" /> {o.buildingAddress}
                  </p>
                )}
                <p className="font-medium text-slate-800 mt-0.5">{o.category || o.type || 'Отключение'}</p>
                {o.description && <p className="text-sm text-slate-600 mt-1 line-clamp-2">{o.description}</p>}
                <p className="text-xs text-slate-400 mt-1 flex items-center gap-1">
                  <Calendar className="w-3 h-3" /> с {formatDate(o.startAt)}
                  {o.endAt && ` до ${formatDate(o.endAt)}`}
                </p>
              </div>
              <span className="inline-flex items-center gap-1 text-[10px] font-black uppercase tracking-wider text-rose-700 bg-rose-100 px-2 py-1 rounded-xl shrink-0">
                <Zap className="w-3 h-3" /> Активно
              </span>
            </li>
          ))}
        </ul>
      )}

      {createOpen && (
        <CreateOutageCard
          isOpen={createOpen}
          onClose={() => setCreateOpen(false)}
          onSuccess={() => { fetchActive(); setCreateOpen(false); }}
          buildingId={buildingId}
        />
      )}
      {openOutageId !== null && (
        <OutageCardDetail
          outageId={openOutageId}
          onClose={() => setOpenOutageId(null)}
          onUpdated={fetchActive}
        />
      )}

      {/* Модалка История */}
      {historyOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" onClick={() => setHistoryOpen(false)}>
          <div className="bg-white rounded-3xl w-full max-w-2xl max-h-[85vh] overflow-hidden shadow-2xl animate-scale-in flex flex-col" onClick={e => e.stopPropagation()}>
            <div className="p-4 border-b border-slate-200 flex justify-between items-center rounded-t-3xl">
              <h3 className="text-lg font-black text-slate-800">История отключений</h3>
              <button type="button" onClick={() => setHistoryOpen(false)} className="p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600 rounded-xl transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            {!buildingId && (
              <div className="px-4 py-3 border-b border-slate-100">
                <label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Дом</label>
                <select
                  value={historyBuildingFilter}
                  onChange={e => setHistoryBuildingFilter(e.target.value)}
                  className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">Все дома</option>
                  {buildings.map(b => (
                    <option key={b.id} value={b.id}>{(b.passport as any)?.address || b.id}</option>
                  ))}
                </select>
              </div>
            )}
            <div className="flex-1 overflow-y-auto p-4">
              {historyLoading ? (
                <p className="text-sm text-slate-400 py-6">Загрузка…</p>
              ) : historyOutages.length === 0 ? (
                <p className="text-sm text-slate-400 py-6 italic">Нет записей</p>
              ) : (
                <ul className="space-y-3">
                  {historyOutages.map((o) => (
                    <li
                      key={o.id}
                      onClick={() => { setHistoryOpen(false); setOpenOutageId(o.id); }}
                      className="bg-slate-50 rounded-xl p-4 border border-slate-100 cursor-pointer hover:border-primary-200 hover:bg-slate-50/80 transition-colors"
                    >
                      {!buildingId && o.buildingAddress && (
                        <p className="text-xs font-bold text-slate-500 flex items-center gap-1">
                          <Building2 className="w-3.5 h-3.5" /> {o.buildingAddress}
                        </p>
                      )}
                      <p className="font-medium text-slate-800 mt-0.5">{o.category || o.type || 'Отключение'}</p>
                      {o.description && <p className="text-sm text-slate-600 mt-1 line-clamp-2">{o.description}</p>}
                      <p className="text-xs text-slate-400 mt-1">
                        {formatDate(o.startAt)}
                        {o.endAt ? ` — ${formatDate(o.endAt)}` : ''}
                        {o.active && <span className="ml-2 text-rose-600 font-black uppercase text-[10px]">Активно</span>}
                      </p>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};