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 { Input } from '../../components/ui/input';
import { toast } from 'sonner';
import { Scale, ExternalLink, History, Check, Search, Calendar } from 'lucide-react';

export default function Bylaws() {
  const [currentBylaws, setCurrentBylaws] = useState(null);
  const [history, setHistory] = useState([]);
  const [years, setYears] = useState([]);
  const [selectedYear, setSelectedYear] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [showHistory, setShowHistory] = useState(false);
  const [loading, setLoading] = useState(true);

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

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

  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 (year = null) => {
    try {
      const url = year ? `/bylaws/history?year=${year}` : '/bylaws/history';
      const response = await api.get(url);
      setHistory(response.data);
    } catch (error) {
      console.error('Failed to load bylaws history');
    }
  };

  const handleYearFilter = (year) => {
    setSelectedYear(year);
    fetchHistory(year);
  };

  const clearFilter = () => {
    setSelectedYear(null);
    fetchHistory();
  };

  const filteredHistory = history.filter(bylaws =>
    bylaws.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (bylaws.version && bylaws.version.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const groupByYear = (items) => {
    const grouped = {};
    items.forEach(item => {
      const year = new Date(item.effective_date).getFullYear();
      if (!grouped[year]) {
        grouped[year] = [];
      }
      grouped[year].push(item);
    });
    return grouped;
  };

  const groupedHistory = groupByYear(filteredHistory.filter(b => !b.is_current));
  const sortedYears = Object.keys(groupedHistory).sort((a, b) => b - a);

  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-brand-purple " 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-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Review the official governing bylaws and policies of the LOAF community.
          </p>

          {/* Filters */}
          <div className="flex gap-4 flex-wrap items-center">
            {/* Search */}
            <div className="relative flex-1 min-w-[300px]">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
              <Input
                type="text"
                placeholder="Search bylaws..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
              />
            </div>

            {/* Year Filter */}
            <div className="flex gap-2 flex-wrap">
              <Button
                onClick={clearFilter}
                variant={selectedYear === null ? "default" : "outline"}
                size="sm"
                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
              >
                All Years
              </Button>
              {years.map(year => (
                <Button
                  key={year}
                  onClick={() => handleYearFilter(year)}
                  variant={selectedYear === year ? "default" : "outline"}
                  size="sm"
                  className={selectedYear === year ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
                >
                  {year}
                </Button>
              ))}
            </div>
          </div>
        </div>

        {/* Current Bylaws */}
        {currentBylaws ? (
          <Card className="p-8 bg-background rounded-2xl border-2 border-brand-purple  mb-6">
            <div className="flex items-start gap-4 mb-6">
              <div className="bg-gradient-to-br from-brand-purple  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-brand-purple  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-brand-purple  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-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              No current bylaws document available
            </p>
          </Card>
        )}

        {/* Version History Toggle */}
        {filteredHistory.filter(b => !b.is_current).length > 0 && (
          <div className="mb-6">
            <Button
              onClick={() => setShowHistory(!showHistory)}
              variant="outline"
              className="w-full border-[var(--neutral-800)] text-brand-purple  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 ({filteredHistory.filter(b => !b.is_current).length} previous {filteredHistory.filter(b => !b.is_current).length === 1 ? 'version' : 'versions'})
            </Button>
          </div>
        )}

        {/* Version History */}
        {showHistory && filteredHistory.filter(b => !b.is_current).length > 0 && (
          <div className="space-y-6">
            {sortedYears.map(year => (
              <div key={year}>
                <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                  <Calendar className="h-5 w-5" />
                  {year}
                </h3>
                <div className="space-y-4">
                  {groupedHistory[year].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-brand-purple ">
                            <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-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
                        >
                          <ExternalLink className="h-4 w-4" />
                          View
                        </Button>
                      </div>
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </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-brand-purple  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-brand-purple " 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>
  );
}