'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import api from '@/lib/api';

interface Tender {
  id: number;
  reference_no: string;
  title: string;
  type: string;
  type_label?: string;
  description?: string;
  publish_date: string;
  closing_date: string;
  status: string;
  status_label?: string;
  is_active: boolean;
  is_open: boolean;
  is_closed: boolean;
  documents: Array<{
    id: number;
    name: string;
    file_name: string;
    mime_type: string;
    size: number;
    human_readable_size: string;
    url: string;
    created_at: string;
  }>;
  created_at: string;
  updated_at: string;
}

interface TenderStatistics {
  total: number;
  by_type: {
    RFP: number;
    RFQ: number;
    ITB: number;
    EOI: number;
    OTHER: number;
  };
}

export default function ProcurementPage() {
  const [tenders, setTenders] = useState<Tender[]>([]);
  const [filteredTenders, setFilteredTenders] = useState<Tender[]>([]);
  const [statistics, setStatistics] = useState<TenderStatistics | null>(null);
  const [loading, setLoading] = useState(true);
  const [statsLoading, setStatsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState<string>('All');
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [previewFileName, setPreviewFileName] = useState<string | null>(null);

  useEffect(() => {
    fetchTenders();
    fetchStatistics();
  }, []);

  useEffect(() => {
    if (!loading) {
      setTimeout(() => setIsVisible(true), 100);
    }
  }, [loading]);

  const fetchTenders = async () => {
    try {
      setLoading(true);
      setError(null);

      const response: any = await api.getTenders({
        status: 'published',
        is_active: true,
        paginate: false,
        order_by: 'closing_date',
        order_direction: 'asc',
      });

      let tendersData: any[] = [];
      if (Array.isArray(response)) {
        tendersData = response;
      } else if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
        tendersData = response.data;
      }

      setTenders(tendersData);
      setFilteredTenders(tendersData);
    } catch (err: any) {
      console.error('Error fetching tenders:', err);
      setError(err?.message || 'Failed to load tenders');
    } finally {
      setLoading(false);
    }
  };

  const fetchStatistics = async () => {
    try {
      setStatsLoading(true);
      const response: any = await api.getTenderStatistics();
      setStatistics(response);
    } catch (err: any) {
      console.error('Error fetching statistics:', err);
    } finally {
      setStatsLoading(false);
    }
  };

  useEffect(() => {
    let filtered = tenders;

    if (searchTerm) {
      filtered = filtered.filter(
        (tender) =>
          tender.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
          tender.reference_no.toLowerCase().includes(searchTerm.toLowerCase()) ||
          (tender.description && tender.description.toLowerCase().includes(searchTerm.toLowerCase()))
      );
    }

    if (filterType !== 'All') {
      filtered = filtered.filter((tender) => tender.type === filterType);
    }

    setFilteredTenders(filtered);
  }, [searchTerm, filterType, tenders]);

  const tenderTypes = ['All', ...Array.from(new Set(tenders.map((t) => t.type))).sort()];

  const handleDownload = (url: string, fileName: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handlePreview = (url: string, fileName: string) => {
    setPreviewUrl(url);
    setPreviewFileName(fileName);
  };

  const closePreview = () => {
    setPreviewUrl(null);
    setPreviewFileName(null);
  };

  const isPdfFile = (mimeType: string) => mimeType === 'application/pdf';

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex min-h-[80vh] items-center justify-center px-4">
          <div className="text-center">
            <div className="mb-4 inline-block h-12 w-12 animate-spin rounded-full border-b-2 border-primary-600" />
            <p className="text-neutral-600">Loading tenders...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col bg-white">
      <Header />

      <section className="relative overflow-hidden border-b border-secondary-200 bg-white pt-28 pb-12 sm:pt-32 sm:pb-16">
        <div className="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="pointer-events-none absolute -right-16 bottom-0 h-56 w-56 rounded-full bg-navy-800/5 blur-3xl" />

        <div
          className={`relative mx-auto max-w-7xl px-4 transition-all duration-700 sm:px-6 lg:px-8 ${
            isVisible ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
          }`}
        >
          <span className="inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-primary-700">
            <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
            Get involved
          </span>

          <h1 className="mt-5 text-4xl font-black leading-tight text-neutral-900 sm:text-5xl md:text-6xl">
            Open{' '}
            <span className="relative inline-block text-primary-600">
              procurement
              <svg
                className="absolute -bottom-2 left-0 w-full text-primary-400"
                viewBox="0 0 220 12"
                preserveAspectRatio="none"
                aria-hidden
              >
                <path d="M2 9C56 2 164 2 218 9" stroke="currentColor" strokeWidth="4" strokeLinecap="round" fill="none" />
              </svg>
            </span>
          </h1>

          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-neutral-600">
            Transparent, fair opportunities for suppliers and partners supporting SSEOA&apos;s
            education and livelihood programmes across Afghanistan.
          </p>

          {!statsLoading && statistics && (
            <div className="mt-10 overflow-hidden rounded-2xl border border-secondary-200 bg-secondary-50">
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
                <div className="border-b border-secondary-200 px-5 py-5 md:border-b-0 md:border-r">
                  <p className="text-3xl font-black text-navy-800">{statistics.total}</p>
                  <p className="mt-1 text-sm text-neutral-500">Total tenders</p>
                </div>
                {Object.entries(statistics.by_type).map(([type, count]) => (
                  <div
                    key={type}
                    className="border-b border-r border-secondary-200 px-5 py-5 last:border-r-0 md:border-b-0"
                  >
                    <p className="text-2xl font-black text-neutral-900">{count}</p>
                    <p className="mt-1 text-sm text-neutral-500">{type}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      <section
        className={`flex-1 bg-white py-12 md:py-16 transition-all duration-700 ${
          isVisible ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
        }`}
      >
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {!error && tenders.length > 0 && (
            <div className="mb-8 flex flex-col gap-4 rounded-2xl border border-secondary-200 bg-secondary-50 p-4 md:flex-row md:items-center">
              <div className="relative flex-1">
                <input
                  type="text"
                  placeholder="Search tenders..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full rounded-lg border border-secondary-300 bg-white py-2.5 pl-10 pr-4 text-sm outline-none transition-all focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20"
                />
                <svg
                  className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-neutral-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              <div className="flex items-center gap-3">
                <label className="whitespace-nowrap text-sm font-medium text-neutral-600">Type</label>
                <select
                  value={filterType}
                  onChange={(e) => setFilterType(e.target.value)}
                  className="rounded-lg border border-secondary-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20"
                >
                  {tenderTypes.map((type) => (
                    <option key={type} value={type}>
                      {type}
                    </option>
                  ))}
                </select>
              </div>
              <p className="whitespace-nowrap text-sm text-neutral-500">
                Showing <span className="font-semibold text-navy-800">{filteredTenders.length}</span> of {tenders.length}
              </p>
            </div>
          )}

          {error ? (
            <div className="rounded-2xl border border-red-200 bg-red-50 py-16 text-center">
              <h3 className="text-2xl font-black text-neutral-900">Could not load tenders</h3>
              <p className="mt-2 text-neutral-600">{error}</p>
              <button
                type="button"
                onClick={fetchTenders}
                className="mt-6 inline-flex items-center rounded-lg bg-navy-800 px-6 py-3 text-sm font-bold text-white hover:bg-navy-700"
              >
                Try again
              </button>
            </div>
          ) : filteredTenders.length === 0 ? (
            <div className="rounded-2xl border border-secondary-200 bg-secondary-50 py-16 text-center">
              <h3 className="text-2xl font-black text-neutral-900">No tenders found</h3>
              <p className="mt-2 text-neutral-600">Try adjusting your search or filter.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {filteredTenders.map((tender) => (
                <Link
                  key={tender.id}
                  href={`/procurement/${tender.id}`}
                  className="block cursor-pointer rounded-2xl border border-secondary-200 bg-white p-5 transition-shadow hover:border-primary-400 hover:shadow-md sm:p-6"
                >
                  <article>
                    <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                      <div className="min-w-0 flex-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="rounded-full bg-primary-500 px-3 py-1 text-xs font-bold uppercase tracking-wide text-neutral-900">
                            {tender.type_label || tender.type}
                          </span>
                          {tender.is_open ? (
                            <span className="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                              Open
                            </span>
                          ) : (
                            <span className="rounded-full bg-secondary-100 px-3 py-1 text-xs font-semibold text-neutral-600">
                              Closed
                            </span>
                          )}
                          <span className="text-xs font-medium text-neutral-400">{tender.reference_no}</span>
                        </div>
                        <h2 className="mt-3 text-xl font-black text-neutral-900">{tender.title}</h2>
                        {tender.description && (
                          <p className="mt-2 line-clamp-2 text-sm leading-relaxed text-neutral-600">
                            {tender.description}
                          </p>
                        )}
                        <div className="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-500">
                          <span>Published {formatDate(tender.publish_date)}</span>
                          <span>Closes {formatDate(tender.closing_date)}</span>
                        </div>
                      </div>

                      {tender.documents && tender.documents.length > 0 && (
                        <div className="flex flex-wrap gap-2 lg:justify-end">
                          {tender.documents.map((doc) => (
                            <div key={doc.id} className="flex gap-2">
                              {isPdfFile(doc.mime_type) && (
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    handlePreview(doc.url, doc.name);
                                  }}
                                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-secondary-300 px-4 py-2 text-sm font-bold text-neutral-800 transition-colors hover:border-primary-500"
                                >
                                  Preview
                                </button>
                              )}
                              <button
                                type="button"
                                onClick={(e) => {
                                  e.preventDefault();
                                  e.stopPropagation();
                                  handleDownload(doc.url, doc.file_name);
                                }}
                                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-navy-800 px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-navy-700"
                              >
                                Download
                              </button>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </article>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>

      {previewUrl && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-navy-900/70 p-4"
          onClick={closePreview}
        >
          <div
            className="relative flex h-full max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl bg-white"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b border-secondary-200 px-5 py-4">
              <h3 className="text-lg font-bold text-neutral-900">{previewFileName}</h3>
              <button
                type="button"
                onClick={closePreview}
                className="rounded-lg p-2 text-neutral-500 transition-colors hover:bg-secondary-100 hover:text-neutral-800"
                aria-label="Close preview"
              >
                <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div className="flex-1 overflow-hidden">
              <iframe
                src={previewUrl}
                className="h-full w-full border-0"
                title={previewFileName || 'Document Preview'}
              />
            </div>
          </div>
        </div>
      )}

      <Footer />
    </div>
  );
}