'use client';

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

interface TenderDocument {
  id: number;
  name: string;
  file_name: string;
  mime_type: string;
  size: number;
  human_readable_size: string;
  url: string;
}

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: TenderDocument[];
}

export default function TenderDetailPage() {
  const params = useParams();
  const identifier = params?.id as string;

  const [tender, setTender] = useState<Tender | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [previewFileName, setPreviewFileName] = useState<string | null>(null);

  useEffect(() => {
    if (!identifier) return;

    const loadTender = async () => {
      try {
        setLoading(true);
        setError(null);
        const response: unknown = await api.getTender(identifier);
        const data =
          response && typeof response === 'object' && 'data' in response
            ? (response as { data: Tender }).data
            : (response as Tender);
        setTender(data);
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to load tender');
        setTender(null);
      } finally {
        setLoading(false);
      }
    };

    loadTender();
  }, [identifier]);

  const formatDate = (dateString?: string) => {
    if (!dateString) return '—';
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  };

  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);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex min-h-[70vh] items-center justify-center px-4">
          <p className="text-neutral-600">Loading tender...</p>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !tender) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="mx-auto flex min-h-[70vh] max-w-3xl flex-col items-center justify-center px-4 text-center">
          <h1 className="text-2xl font-black text-neutral-900">Tender not found</h1>
          <p className="mt-2 text-neutral-600">{error || 'This opportunity may have been removed.'}</p>
          <Link
            href="/procurement"
            className="mt-6 inline-flex cursor-pointer items-center rounded-lg bg-navy-800 px-5 py-2.5 text-sm font-bold text-white hover:bg-navy-700"
          >
            Back to procurement
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  const isOpen = Boolean(tender.is_open);

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

      <section className="relative overflow-hidden border-b border-secondary-200 bg-white pt-28 pb-12 sm:pt-32">
        <div className="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <Link
            href="/procurement"
            className="inline-flex cursor-pointer items-center gap-2 text-sm font-bold text-navy-800 hover:text-primary-600"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Back to procurement
          </Link>

          <div className="mt-6 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>
            <span
              className={`rounded-full px-3 py-1 text-xs font-semibold ${
                isOpen ? 'bg-emerald-50 text-emerald-700' : 'bg-secondary-100 text-neutral-600'
              }`}
            >
              {isOpen ? 'Open' : 'Closed'}
            </span>
            <span className="text-xs font-medium text-neutral-400">{tender.reference_no}</span>
          </div>

          <h1 className="mt-4 text-3xl font-black leading-tight text-neutral-900 sm:text-4xl md:text-5xl">
            {tender.title}
          </h1>
        </div>
      </section>

      <section className="py-12 sm:py-16">
        <div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div className="rounded-2xl border border-secondary-200 bg-secondary-50 p-5">
              <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Published</p>
              <p className="mt-2 font-semibold text-neutral-900">{formatDate(tender.publish_date)}</p>
            </div>
            <div className="rounded-2xl border border-secondary-200 bg-secondary-50 p-5">
              <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Closing date</p>
              <p className="mt-2 font-semibold text-neutral-900">{formatDate(tender.closing_date)}</p>
            </div>
            <div className="rounded-2xl border border-secondary-200 bg-secondary-50 p-5">
              <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">Status</p>
              <p className="mt-2 font-semibold text-neutral-900">{tender.status_label || (isOpen ? 'Open' : 'Closed')}</p>
            </div>
          </div>

          {tender.description && (
            <div>
              <h2 className="text-lg font-black text-neutral-900">Details</h2>
              <div className="mt-3 whitespace-pre-line text-base leading-relaxed text-neutral-600">
                {tender.description}
              </div>
            </div>
          )}

          <div>
            <h2 className="text-lg font-black text-neutral-900">Documents</h2>
            {tender.documents && tender.documents.length > 0 ? (
              <ul className="mt-4 space-y-3">
                {tender.documents.map((doc) => (
                  <li
                    key={doc.id}
                    className="flex flex-col gap-3 rounded-2xl border border-secondary-200 bg-white p-4 sm:flex-row sm:items-center sm:justify-between"
                  >
                    <div>
                      <p className="font-semibold text-neutral-900">{doc.name || doc.file_name}</p>
                      <p className="text-sm text-neutral-500">{doc.human_readable_size}</p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {doc.mime_type === 'application/pdf' && (
                        <button
                          type="button"
                          onClick={() => {
                            setPreviewUrl(doc.url);
                            setPreviewFileName(doc.name || doc.file_name);
                          }}
                          className="inline-flex cursor-pointer items-center rounded-lg border border-secondary-300 px-4 py-2 text-sm font-bold text-neutral-800 hover:border-primary-500"
                        >
                          Preview
                        </button>
                      )}
                      <button
                        type="button"
                        onClick={() => handleDownload(doc.url, doc.file_name)}
                        className="inline-flex cursor-pointer items-center rounded-lg bg-navy-800 px-4 py-2 text-sm font-bold text-white hover:bg-navy-700"
                      >
                        Download
                      </button>
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="mt-3 text-neutral-500">No documents attached to this tender.</p>
            )}
          </div>
        </div>
      </section>

      {previewUrl && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-navy-900/70 p-4"
          onClick={() => {
            setPreviewUrl(null);
            setPreviewFileName(null);
          }}
        >
          <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={() => {
                  setPreviewUrl(null);
                  setPreviewFileName(null);
                }}
                className="cursor-pointer rounded-lg p-2 text-neutral-500 hover:bg-secondary-100"
                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>
            <iframe src={previewUrl} className="h-full w-full flex-1 border-0" title={previewFileName || 'Preview'} />
          </div>
        </div>
      )}

      <Footer />
    </div>
  );
}