import { useState, useEffect, useCallback } from 'react';
import {
  FolderDown, ChevronRight, RefreshCw, Download, FileText, Lock, Globe,
  Server, Activity, Database, Package, BarChart3, AlertCircle, Loader2, Filter,
} from 'lucide-react';
import client from '@/api/client';
import { useI18n } from '@/i18n';

/* ── Types ── */

interface Report {
  id: string;
  tenancy_name: string;
  status: string;
  level: number | null;
  created_at: string;
  completed_at: string | null;
}

interface ReportFile {
  id: string;
  file_name: string;
  file_type: string;
  file_category: string;
  file_size: number;
}

/* ── Helpers ── */

function extractSection(name: string): string {
  const m = name.match(/^(?:cis|obp)_([A-Za-z_]+?)_\d/);
  if (m) return m[1].replace(/_/g, ' ');
  if (name.includes('summary')) return 'Summary';
  if (name.includes('error')) return 'Error';
  return 'Other';
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function fileExt(name: string): string {
  return (name.split('.').pop() || '').toLowerCase();
}

const extColors: Record<string, string> = {
  html: '#e44d26',
  csv: '#217346',
  json: '#f5a623',
  xlsx: '#217346',
  txt: '#6b7280',
  pdf: '#dc2626',
};

const sectionIcons: Record<string, typeof Lock> = {
  'Identity and Access Management': Lock,
  'Networking': Globe,
  'Compute': Server,
  'Logging and Monitoring': Activity,
  'Storage Object Storage': Database,
  'Storage Block Volumes': Database,
  'Storage File Storage Service': Database,
  'Asset Management': Package,
  'Summary': BarChart3,
  'Error': AlertCircle,
  'Other': FileText,
};

function sectionSort(a: string, b: string): number {
  if (a === 'Summary') return -1;
  if (b === 'Summary') return 1;
  if (a === 'Other') return 1;
  if (b === 'Other') return -1;
  return a.localeCompare(b);
}

function groupBySection(files: ReportFile[]): Record<string, ReportFile[]> {
  const map: Record<string, ReportFile[]> = {};
  for (const f of files) {
    const sec = extractSection(f.file_name);
    (map[sec] ||= []).push(f);
  }
  return map;
}

/* ── Component ── */

export default function DownloadsPage() {
  const { t } = useI18n();
  const [reports, setReports] = useState<Report[]>([]);
  const [expandedRid, setExpandedRid] = useState<string | null>(null);
  const [filesCache, setFilesCache] = useState<Record<string, ReportFile[]>>({});
  const [loadingFiles, setLoadingFiles] = useState<string | null>(null);
  const [tenancyFilter, setTenancyFilter] = useState('');
  const [sectionFilter, setSectionFilter] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const token = localStorage.getItem('t') || '';

  const loadReports = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const data = await client.get('/reports') as unknown as Report[];
      setReports(data.filter((r) => r.status === 'completed'));
    } catch (err) {
      setError(err instanceof Error ? err.message : t('dl.loadError'));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { loadReports(); }, [loadReports]);

  const handleRefresh = useCallback(() => {
    setFilesCache({});
    setExpandedRid(null);
    setSectionFilter('');
    loadReports();
  }, [loadReports]);

  const toggleExpand = useCallback(async (rid: string) => {
    if (expandedRid === rid) {
      setExpandedRid(null);
      return;
    }
    setExpandedRid(rid);
    if (!filesCache[rid]) {
      setLoadingFiles(rid);
      try {
        const files = await client.get(`/reports/${rid}/files`) as unknown as ReportFile[];
        setFilesCache((prev) => ({ ...prev, [rid]: files }));
      } catch {
        setFilesCache((prev) => ({ ...prev, [rid]: [] }));
      } finally {
        setLoadingFiles(null);
      }
    }
  }, [expandedRid, filesCache]);

  const handleDownload = useCallback((rid: string, fid: string) => {
    window.open(`/api/reports/${rid}/files/${fid}/download?token=${token}`, '_blank');
  }, [token]);

  /* Derived data */
  const tenancies = [...new Set(reports.map((r) => r.tenancy_name))].sort();
  const filtered = tenancyFilter ? reports.filter((r) => r.tenancy_name === tenancyFilter) : reports;

  /* Sections available in expanded report (for filter) */
  const expandedFiles = expandedRid ? filesCache[expandedRid] : null;
  const expandedSections = expandedFiles
    ? [...new Set(expandedFiles.map((f) => extractSection(f.file_name)))].sort(sectionSort)
    : [];

  return (
    <div className="page">
      {/* Header */}
      <div className="page-header">
        <div className="icon" style={{ background: 'var(--bg3)' }}>
          <FolderDown size={24} style={{ color: 'var(--t3)' }} />
        </div>
        <div>
          <h1>{t('dl.title')}</h1>
          <div className="subtitle">{t('dl.subtitle')}</div>
        </div>
        <div className="spacer" />
        <span className="count">{filtered.length} {t('dl.reports')}</span>
      </div>

      {/* Toolbar */}
      <div className="card" style={{ padding: '12px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <div className="flex items-center gap-3 flex-wrap">
          {/* Tenancy filter */}
          <div className="flex items-center gap-1.5">
            <Filter size={13} style={{ color: 'var(--t4)' }} />
            <select
              value={tenancyFilter}
              onChange={(e) => { setTenancyFilter(e.target.value); setExpandedRid(null); setSectionFilter(''); }}
              className="text-xs py-1.5 px-2.5 rounded-lg outline-none cursor-pointer"
              style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', color: 'var(--t1)', minWidth: 180 }}
            >
              <option value="">{t('dl.allTenancies')} ({reports.length})</option>
              {tenancies.map((tn) => (
                <option key={tn} value={tn}>
                  {tn} ({reports.filter((r) => r.tenancy_name === tn).length})
                </option>
              ))}
            </select>
          </div>

          {/* Section filter (only when expanded) */}
          {expandedRid && expandedSections.length > 1 && (
            <select
              value={sectionFilter}
              onChange={(e) => setSectionFilter(e.target.value)}
              className="text-xs py-1.5 px-2.5 rounded-lg outline-none cursor-pointer"
              style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', color: 'var(--t1)', minWidth: 160 }}
            >
              <option value="">{t('dl.allSections')}</option>
              {expandedSections.map((s) => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          )}

          <span className="text-[.7rem]" style={{ color: 'var(--t4)' }}>
            {filtered.length} {t('dl.reports')}
          </span>
        </div>

        <button
          onClick={handleRefresh}
          disabled={loading}
          className="btn btn-secondary btn-sm"
        >
          <RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
          {t('dl.refresh')}
        </button>
      </div>

      {/* Error */}
      {error && (
        <div
          className="flex items-center gap-2 px-3.5 py-2.5 rounded-lg mb-4 text-xs font-medium"
          style={{ background: 'var(--rdl)', color: 'var(--rd)' }}
        >
          <AlertCircle size={14} />
          {error}
        </div>
      )}

      {/* Loading */}
      {loading && !reports.length && (
        <div className="flex items-center justify-center gap-2 py-16" style={{ color: 'var(--t4)' }}>
          <Loader2 size={18} className="animate-spin" />
          <span className="text-sm">{t('dl.loading')}</span>
        </div>
      )}

      {/* Empty state */}
      {!loading && !filtered.length && (
        <div className="card">
          <div className="empty-state">
            <FolderDown size={40} />
            <h3>{t('dl.noReports')}</h3>
            <p>{t('dl.noReportsHint')}</p>
          </div>
        </div>
      )}

      {/* Report list */}
      <div className="flex flex-col gap-2.5">
        {filtered.map((report) => {
          const isExpanded = expandedRid === report.id;
          const files = filesCache[report.id];
          const isLoading = loadingFiles === report.id;
          const fileCount = files ? files.length : null;

          return (
            <div
              key={report.id}
              className="card"
              style={{
                padding: 0,
                overflow: 'hidden',
                borderColor: isExpanded ? 'color-mix(in srgb, var(--ac) 30%, var(--bd))' : undefined,
                boxShadow: isExpanded ? 'var(--sh2)' : undefined,
              }}
            >
              {/* Report header */}
              <button
                onClick={() => toggleExpand(report.id)}
                className="w-full flex items-center justify-between px-4 py-3 text-left transition-colors hover:bg-[var(--bg2)]"
              >
                <div className="flex items-center gap-3">
                  <ChevronRight
                    size={14}
                    className="transition-transform duration-200 flex-shrink-0"
                    style={{
                      color: 'var(--ac)',
                      transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
                    }}
                  />
                  <div>
                    <span className="text-[.82rem] font-semibold" style={{ color: 'var(--t1)' }}>
                      {report.tenancy_name}
                    </span>
                    <div className="flex items-center gap-2 mt-0.5">
                      <span className="text-[.65rem]" style={{ color: 'var(--t4)' }}>
                        Level {report.level || 2}
                      </span>
                      <span className="text-[.5rem]" style={{ color: 'var(--t4)' }}>|</span>
                      <span className="text-[.65rem]" style={{ color: 'var(--t4)' }}>
                        {report.created_at}
                      </span>
                      {fileCount != null && (
                        <>
                          <span className="text-[.5rem]" style={{ color: 'var(--t4)' }}>|</span>
                          <span className="text-[.65rem]" style={{ color: 'var(--t4)' }}>
                            {fileCount} {t('dl.files')}
                          </span>
                        </>
                      )}
                    </div>
                  </div>
                </div>
                <span className="text-[.68rem] flex-shrink-0" style={{ color: 'var(--t4)' }}>
                  {isExpanded ? t('dl.hide') : t('dl.viewFiles')}
                </span>
              </button>

              {/* Expanded file list */}
              {isExpanded && (
                <div
                  className="px-4 py-4"
                  style={{ borderTop: '1px solid var(--bd)', background: 'var(--bg2)' }}
                >
                  {isLoading ? (
                    <div className="flex items-center justify-center gap-2 py-6" style={{ color: 'var(--t4)' }}>
                      <Loader2 size={16} className="animate-spin" />
                      <span className="text-xs">{t('dl.loadingFiles')}</span>
                    </div>
                  ) : !files || !files.length ? (
                    <p className="text-xs text-center py-6" style={{ color: 'var(--t4)' }}>
                      {t('dl.noFiles')}
                    </p>
                  ) : (
                    <FileListGrouped
                      files={files}
                      reportId={report.id}
                      sectionFilter={sectionFilter}
                      onDownload={handleDownload}
                    />
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ── FileListGrouped sub-component ── */

function FileListGrouped({
  files,
  reportId,
  sectionFilter,
  onDownload,
}: {
  files: ReportFile[];
  reportId: string;
  sectionFilter: string;
  onDownload: (rid: string, fid: string) => void;
}) {
  const { t } = useI18n();
  const grouped = groupBySection(files);
  let sections = Object.keys(grouped).sort(sectionSort);
  if (sectionFilter) sections = sections.filter((s) => s === sectionFilter);

  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <span className="text-[.72rem]" style={{ color: 'var(--t3)' }}>
          {files.length} {t('dl.filesInSections').replace('{0}', String(Object.keys(grouped).length))}
        </span>
      </div>

      {sections.map((sec) => {
        const secFiles = grouped[sec];
        const Icon = sectionIcons[sec] || FileText;
        return (
          <div key={sec} className="mb-3">
            {/* Section header */}
            <div
              className="flex items-center gap-2 mb-2 pb-1.5"
              style={{ borderBottom: '1px solid var(--bd)' }}
            >
              <Icon size={13} style={{ color: 'var(--t3)', opacity: 0.7 }} />
              <span className="text-[.72rem] font-bold" style={{ color: 'var(--t1)' }}>{sec}</span>
              <span className="text-[.6rem]" style={{ color: 'var(--t4)' }}>({secFiles.length})</span>
            </div>

            {/* File grid */}
            <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))' }}>
              {secFiles.map((f) => {
                const ext = fileExt(f.file_name);
                const color = extColors[ext] || 'var(--ac)';
                return (
                  <button
                    key={f.id}
                    onClick={() => onDownload(reportId, f.id)}
                    className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-left transition-all group"
                    style={{
                      background: 'var(--bg)',
                      border: '1px solid var(--bd)',
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.borderColor = color;
                      e.currentTarget.style.boxShadow = `0 2px 8px ${color}18`;
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.borderColor = 'var(--bd)';
                      e.currentTarget.style.boxShadow = 'none';
                    }}
                  >
                    {/* File type badge */}
                    <div
                      className="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0"
                      style={{ background: `${color}14` }}
                    >
                      <span
                        className="text-[.58rem] font-bold uppercase tracking-wide"
                        style={{ color }}
                      >
                        {ext}
                      </span>
                    </div>
                    {/* File info */}
                    <div className="flex-1 min-w-0 overflow-hidden">
                      <div
                        className="text-[.7rem] font-medium truncate"
                        style={{ color: 'var(--t1)' }}
                        title={f.file_name}
                      >
                        {f.file_name}
                      </div>
                      <div className="text-[.58rem] mt-0.5" style={{ color: 'var(--t4)' }}>
                        {formatSize(f.file_size)}
                      </div>
                    </div>
                    {/* Download icon */}
                    <Download
                      size={12}
                      className="flex-shrink-0 opacity-30 group-hover:opacity-70 transition-opacity"
                      style={{ color: 'var(--t3)' }}
                    />
                  </button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}