import React, { useState } from 'react';
import { Rulebook } from '../types';

interface RulebooksModalProps {
  rulebooks: Rulebook[];
  onSelectRulebook: (rulebookId: string) => void;
  onClose: () => void;
}

export const RulebooksModal: React.FC<RulebooksModalProps> = ({
  rulebooks,
  onSelectRulebook,
  onClose,
}) => {
  const [activeTab, setActiveTab] = useState<'all' | 'active' | 'coming_soon'>('all');
  const [search, setSearch] = useState('');

  const filtered = rulebooks.filter((rb) => {
    const matchesTab =
      activeTab === 'all' ? true : rb.status === activeTab;
    const matchesSearch =
      rb.title.toLowerCase().includes(search.toLowerCase()) ||
      rb.description.toLowerCase().includes(search.toLowerCase()) ||
      rb.keyStatute.toLowerCase().includes(search.toLowerCase());
    return matchesTab && matchesSearch;
  });

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl max-w-3xl w-full max-h-[85vh] flex flex-col shadow-2xl border border-[#E2E8F0] overflow-hidden">
        {/* Header */}
        <div className="p-6 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
          <div>
            <div className="flex items-center gap-2">
              <span className="material-symbols-outlined text-[#006c4a] text-[24px]">gavel</span>
              <h2 className="font-headline font-bold text-[20px] text-[#0F172A]">
                CaseLoop Statutory Templates Catalog
              </h2>
            </div>
            <p className="text-[13px] text-[#64748B] mt-0.5">
              Standard legal templates, auto-redaction protections, and filing pathways
            </p>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full flex items-center justify-center text-[#64748B] hover:text-[#0F172A] hover:bg-[#E2E8F0] transition-colors cursor-pointer"
          >
            <span className="material-symbols-outlined text-[20px]">close</span>
          </button>
        </div>

        {/* Filters */}
        <div className="px-6 py-3 border-b border-[#E2E8F0] flex flex-col sm:flex-row gap-3 justify-between items-center bg-white">
          <div className="flex gap-2 text-[12px]">
            <button
              onClick={() => setActiveTab('all')}
              className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
                activeTab === 'all'
                  ? 'bg-[#0F172A] text-white'
                  : 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
              }`}
            >
              All Templates ({rulebooks.length})
            </button>
            <button
              onClick={() => setActiveTab('active')}
              className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
                activeTab === 'active'
                  ? 'bg-[#006c4a] text-white'
                  : 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
              }`}
            >
              Active ({rulebooks.filter((r) => r.status === 'active').length})
            </button>
            <button
              onClick={() => setActiveTab('coming_soon')}
              className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
                activeTab === 'coming_soon'
                  ? 'bg-[#475569] text-white'
                  : 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
              }`}
            >
              In Development ({rulebooks.filter((r) => r.status === 'coming_soon').length})
            </button>
          </div>

          <input
            type="text"
            placeholder="Search statutes, keywords..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="text-[13px] border border-[#CBD5E1] rounded-lg px-3 py-1.5 w-full sm:w-60 focus:border-[#0F172A] outline-none"
          />
        </div>

        {/* Templates List */}
        <div className="p-6 overflow-y-auto flex flex-col gap-4 flex-grow">
          {filtered.map((rb) => {
            const isActive = rb.status === 'active';
            return (
              <div
                key={rb.id}
                className={`p-5 rounded-xl border transition-all ${
                  isActive
                    ? 'border-[#CBD5E1] bg-white hover:border-[#0F172A] hover:shadow-sm'
                    : 'border-[#E2E8F0] bg-[#F8FAFC] opacity-80'
                }`}
              >
                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-2">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                        isActive
                          ? 'bg-[#0F172A]/5 text-[#0F172A]'
                          : 'bg-[#E2E8F0] text-[#94A3B8]'
                      }`}
                    >
                      <span className="material-symbols-outlined text-[22px]">{rb.icon}</span>
                    </div>
                    <div>
                      <h3 className="font-headline font-bold text-[16px] text-[#0F172A]">
                        {rb.title}
                      </h3>
                      <span className="text-[11px] text-[#64748B]">{rb.category}</span>
                    </div>
                  </div>

                  <span
                    className={`text-[11px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider ${
                      isActive
                        ? 'bg-[#DCFCE7] text-[#166534]'
                        : 'bg-[#E2E8F0] text-[#475569]'
                    }`}
                  >
                    {rb.statusLabel}
                  </span>
                </div>

                <p className="text-[13.5px] text-[#475569] leading-relaxed mb-3">
                  {rb.description}
                </p>

                <div className="flex flex-wrap items-center justify-between gap-3 pt-3 border-t border-[#F1F5F9] text-[12px]">
                  <div className="text-[#64748B]">
                    <span className="font-semibold text-[#1E293B]">Key Statute:</span> {rb.keyStatute}
                  </div>

                  {isActive ? (
                    <button
                      onClick={() => {
                        onSelectRulebook(rb.id);
                        onClose();
                      }}
                      className="bg-[#0F172A] hover:bg-[#1E293B] text-white px-3.5 py-1.5 rounded-lg font-medium transition-colors flex items-center gap-1 cursor-pointer"
                    >
                      <span>Draft with this Template</span>
                      <span className="material-symbols-outlined text-[15px]">arrow_forward</span>
                    </button>
                  ) : (
                    <span className="text-[#94A3B8] font-medium flex items-center gap-1">
                      <span className="material-symbols-outlined text-[14px]">lock</span>
                      Template in validation
                    </span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};