import React, { useState, useEffect } from 'react';
import api from '../../utils/api';
import Navbar from '../../components/Navbar';
import MemberFooter from '../../components/MemberFooter';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { toast } from 'sonner';
import { Scale, ExternalLink, History, Check } from 'lucide-react';

export default function Bylaws() {
  const [currentBylaws, setCurrentBylaws] = useState(null);
  const [history, setHistory] = useState([]);
  const [showHistory, setShowHistory] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchCurrentBylaws();
    fetchHistory();
  }, []);

  const fetchCurrentBylaws = async () => {
    try {
      const response = await api.get('/bylaws/current');
      setCurrentBylaws(response.data);
    } catch (error) {
      if (error.response?.status !== 404) {
        toast.error('Failed to load current bylaws');
      }
    } finally {
      setLoading(false);
    }
  };

  const fetchHistory = async () => {
    try {
      const response = await api.get('/bylaws/history');
      setHistory(response.data);
    } catch (error) {
      console.error('Failed to load bylaws history');
    }
  };

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

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="flex items-center justify-center min-h-[60vh]">
          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Loading bylaws...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <div className="max-w-5xl mx-auto px-6 py-12">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            LOAF Bylaws
          </h1>
          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Review the official governing bylaws and policies of the LOAF community.
          </p>
        </div>

        {/* Current Bylaws */}
        {currentBylaws ? (
          <Card className="p-8 bg-background rounded-2xl border-2 border-var(--purple-lavender) mb-6">
            <div className="flex items-start gap-4 mb-6">
              <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl">
                <Scale className="h-8 w-8 text-white" />
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                    {currentBylaws.title}
                  </h2>
                  <Badge className="bg-var(--green-light) text-white">
                    <Check className="h-3 w-3 mr-1" />
                    Current Version
                  </Badge>
                </div>
                <div className="flex items-center gap-4 text-var(--purple-lavender) mb-4">
                  <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Version: <strong>{currentBylaws.version}</strong>
                  </span>
                  <span>•</span>
                  <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Effective: <strong>{formatDate(currentBylaws.effective_date)}</strong>
                  </span>
                </div>
                <Button
                  onClick={() => window.open(currentBylaws.document_url, '_blank')}
                  size="lg"
                  className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
                >
                  <ExternalLink className="h-5 w-5" />
                  View Current Bylaws
                </Button>
              </div>
            </div>
          </Card>
        ) : (
          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800) mb-6">
            <Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              No current bylaws document available
            </p>
          </Card>
        )}

        {/* Version History Toggle */}
        {history.length > 1 && (
          <div className="mb-6">
            <Button
              onClick={() => setShowHistory(!showHistory)}
              variant="outline"
              className="w-full border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center justify-center gap-2"
            >
              <History className="h-4 w-4" />
              {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
            </Button>
          </div>
        )}

        {/* Version History */}
        {showHistory && history.length > 1 && (
          <div className="space-y-4">
            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Previous Versions
            </h3>
            {history.filter(b => !b.is_current).map(bylaws => (
              <Card key={bylaws.id} className="p-6 bg-var(--lavender-600) rounded-xl border border-var(--neutral-800)">
                <div className="flex items-center justify-between">
                  <div>
                    <h4 className="text-lg font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                      {bylaws.title}
                    </h4>
                    <div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
                      <span>Version {bylaws.version}</span>
                      <span>•</span>
                      <span>Effective {formatDate(bylaws.effective_date)}</span>
                    </div>
                  </div>
                  <Button
                    onClick={() => window.open(bylaws.document_url, '_blank')}
                    variant="outline"
                    size="sm"
                    className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center gap-2"
                  >
                    <ExternalLink className="h-4 w-4" />
                    View
                  </Button>
                </div>
              </Card>
            ))}
          </div>
        )}

        {/* Information Card */}
        <Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
          <div className="flex items-start gap-3">
            <Scale className="h-5 w-5 text-var(--purple-lavender) mt-1" />
            <div>
              <h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                About LOAF Bylaws
              </h4>
              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                The bylaws serve as the governing document for LOAF, outlining the organization's structure,
                membership requirements, officer responsibilities, and operational procedures. All members are
                encouraged to familiarize themselves with these guidelines.
              </p>
            </div>
          </div>
        </Card>
      </div>
      <MemberFooter />
    </div>
  );
}