'use client';

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

interface Policy {
  id: number;
  title: string;
  slug: string;
  type: string;
  body?: string;
  status: string;
  order: number;
  protected: boolean;
  is_authorized?: boolean;
  documents: Array<{
    id: number;
    name: string;
    file_name: string;
    mime_type: string;
    size: number;
    human_readable_size: string;
    url: string;
    view_url?: string;
    created_at: string;
  }>;
  created_at: string;
  updated_at: string;
}

function isPolicy(obj: any): obj is Policy {
  return (
    obj &&
    typeof obj === 'object' &&
    typeof obj.id === 'number' &&
    typeof obj.title === 'string' &&
    typeof obj.slug === 'string' &&
    typeof obj.type === 'string' &&
    typeof obj.status === 'string' &&
    typeof obj.order === 'number' &&
    typeof obj.protected === 'boolean'
  );
}

export default function PolicyDetailPage() {
  const params = useParams();
  const slug = params.slug as string;

  const [policy, setPolicy] = useState<Policy | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [passkey, setPasskey] = useState('');
  const [passkeyError, setPasskeyError] = useState('');
  const [showPasskeyModal, setShowPasskeyModal] = useState(false);
  const [verifiedPasskey, setVerifiedPasskey] = useState('');

  const fetchPolicy = async (passkeyValue?: string): Promise<Policy | null> => {
    try {
      setLoading(true);
      setError(null);
      setPasskeyError('');

      const response = await api.getPolicy(slug, passkeyValue);

      let policyData: Policy | null = null;

      if (response && typeof response === 'object') {
        if ('data' in response && response.data && typeof response.data === 'object') {
          const data = response.data;
          if (isPolicy(data)) {
            policyData = data;
          }
        } else if (isPolicy(response)) {
          policyData = response;
        }
      }

      if (!policyData) {
        throw new Error('Invalid policy data received from server');
      }

      setPolicy(policyData);

      if (policyData.protected && !policyData.is_authorized) {
        setShowPasskeyModal(true);
      } else if (policyData.protected && policyData.is_authorized) {
        setShowPasskeyModal(false);
        setPasskey('');
      }

      return policyData;
    } catch (err: any) {
      setError(err?.message || 'Failed to load policy');
      setPolicy(null);
      return null;
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchPolicy();
  }, [slug]);

  const handlePasskeySubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setPasskeyError('');

    if (!passkey.trim()) {
      setPasskeyError('Please enter a passkey');
      return;
    }

    const updatedPolicy = await fetchPolicy(passkey.trim());

    if (updatedPolicy) {
      if (updatedPolicy.is_authorized) {
        setVerifiedPasskey(passkey.trim());
        setShowPasskeyModal(false);
        setPasskey('');
      } else {
        setPasskeyError('Invalid passkey. Please try again.');
        setPasskey('');
      }
    } else {
      setPasskeyError('Failed to verify passkey. Please try again.');
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex min-h-[70vh] 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-500" />
            <p className="text-neutral-600">Loading policy…</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !policy) {
    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">Policy not found</h1>
          <p className="mt-2 text-neutral-600">{error || 'The policy you are looking for does not exist.'}</p>
          <Link
            href="/policies"
            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 policies
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  const isLocked = policy.protected && !policy.is_authorized;
  const documents = policy.documents || [];
  const pdfDocuments = documents.filter((doc) => isPdfDocument(doc.mime_type, doc.file_name));
  const otherDocuments = documents.filter((doc) => !isPdfDocument(doc.mime_type, doc.file_name));

  const documentSrc = (doc: Policy['documents'][number]) => {
    const url = doc.view_url || doc.url;
    if (policy.protected && verifiedPasskey) {
      const join = url.includes('?') ? '&' : '?';
      return `${url}${join}passkey=${encodeURIComponent(verifiedPasskey)}`;
    }
    return url;
  };

  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="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-4xl px-4 sm:px-6 lg:px-8">
          <Link
            href="/policies"
            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 policies
          </Link>

          <div className="mt-6">
            <span className="rounded-full bg-primary-500 px-3 py-1 text-xs font-bold uppercase tracking-wide text-neutral-900">
              {policy.type}
            </span>
          </div>

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

      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          {isLocked ? (
            <div className="rounded-3xl border border-secondary-200 bg-secondary-50 px-6 py-14 text-center sm:px-10">
              <p className="text-xs font-bold uppercase tracking-widest text-primary-600">Restricted access</p>
              <h2 className="mt-3 text-2xl font-black text-neutral-900">This policy is protected</h2>
              <p className="mx-auto mt-3 max-w-md text-neutral-600">
                Enter the passkey to read the full document and any attached files.
              </p>
              <button
                type="button"
                onClick={() => setShowPasskeyModal(true)}
                className="mt-8 inline-flex cursor-pointer items-center rounded-lg bg-navy-800 px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-navy-700"
              >
                Enter passkey
              </button>
            </div>
          ) : (
            <div className="space-y-8">
              {policy.body && (
                <div className="rounded-3xl border border-secondary-200 bg-white p-6 sm:p-8 md:p-10">
                  <div
                    className="prose prose-lg max-w-none text-neutral-700 prose-headings:font-black prose-headings:text-neutral-900 prose-a:text-navy-800 prose-strong:text-neutral-900"
                    dangerouslySetInnerHTML={{ __html: policy.body }}
                  />
                </div>
              )}

              {pdfDocuments.length > 0 && (
                <div className="space-y-6">
                  {pdfDocuments.map((doc) => (
                    <div key={doc.id}>
                      <h2 className="mb-3 text-xl font-black text-neutral-900">{doc.name || 'Policy document'}</h2>
                      <InPagePdf src={documentSrc(doc)} title={doc.name || 'policy.pdf'} />
                    </div>
                  ))}
                </div>
              )}

              {otherDocuments.length > 0 && (
                <div className="rounded-3xl border border-secondary-200 bg-secondary-50 p-6 sm:p-8">
                  <h2 className="text-xl font-black text-neutral-900">Related documents</h2>
                  <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2">
                    {otherDocuments.map((doc) => (
                      <a
                        key={doc.id}
                        href={documentSrc(doc)}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex cursor-pointer items-center gap-4 rounded-2xl border border-secondary-200 bg-white p-4 transition-colors hover:border-primary-400"
                      >
                        <div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-navy-800 text-white">
                          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                            />
                          </svg>
                        </div>
                        <div className="min-w-0 flex-1">
                          <p className="truncate font-bold text-neutral-900">{doc.name}</p>
                          <p className="text-sm text-neutral-500">{doc.human_readable_size}</p>
                        </div>
                      </a>
                    ))}
                  </div>
                </div>
              )}

              {!policy.body && documents.length === 0 && (
                <div className="rounded-3xl border border-secondary-200 bg-secondary-50 px-6 py-14 text-center">
                  <h2 className="text-xl font-black text-neutral-900">No content yet</h2>
                  <p className="mt-2 text-neutral-600">This policy does not have a published body or documents.</p>
                </div>
              )}
            </div>
          )}
        </div>
      </section>

      <Footer />

      {showPasskeyModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-navy-900/70 p-4">
          <div className="w-full max-w-md rounded-3xl border border-secondary-200 bg-white p-6 sm:p-8">
            <p className="text-xs font-bold uppercase tracking-widest text-primary-600">Protected policy</p>
            <h3 className="mt-2 text-2xl font-black text-neutral-900">Enter passkey</h3>
            <p className="mt-2 text-sm text-neutral-600">This document is restricted. Enter the passkey to continue.</p>

            <form onSubmit={handlePasskeySubmit} className="mt-6 space-y-4">
              <div>
                <input
                  type="password"
                  value={passkey}
                  onChange={(e) => setPasskey(e.target.value)}
                  placeholder="Passkey"
                  className="w-full rounded-lg border border-secondary-300 bg-white px-4 py-3 text-sm outline-none transition-all focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20"
                  autoFocus
                />
                {passkeyError && <p className="mt-2 text-sm text-red-600">{passkeyError}</p>}
              </div>

              <div className="flex gap-3">
                <button
                  type="button"
                  onClick={() => {
                    setShowPasskeyModal(false);
                    setPasskey('');
                    setPasskeyError('');
                  }}
                  className="flex-1 cursor-pointer rounded-lg border border-secondary-300 px-4 py-3 text-sm font-bold text-navy-800 transition-colors hover:border-primary-500"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex-1 cursor-pointer rounded-lg bg-navy-800 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-navy-700"
                >
                  Unlock
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}