import React, { useState, useRef } from 'react';
import { Rulebook } from '../types';
import { FoldText } from './animations/FoldText';
import { RotatingText } from './animations/RotatingText';
import { TextType } from './animations/TextType';
import { analyzeIssueApi, AIAnalysisResponse } from '../services/api';

interface RulebookSelectorProps {
  rulebooks: Rulebook[];
  selectedCity?: string;
  onSelectRulebook: (rulebookId: string, initialPrompt?: string) => void;
  onLaunchAICase?: (aiData: AIAnalysisResponse, rawText: string) => void;
  onSaveAICaseToCloud?: (aiData: AIAnalysisResponse, rawText: string) => Promise<void>;
  onViewAllRulebooks: () => void;
  onAnalyzePrompt: (prompt: string) => void;
  onOpenGuidedIntake?: (category?: string) => void;
  onOpenRtiAuditor?: () => void;
}

const SAMPLE_SCENARIOS = [
  'Landlord refusing to refund ₹1,40,000 security deposit after clean handover',
  'Municipal corporation tender expenditure and quality audit for Ward 150 road work',
  'E-commerce seller delivered defective laptop and refused refund of ₹64,990',
  'Employer withholding 2 months salary and ₹1,80,000 F&F settlement after resignation',
  'Bank refusing chargeback for ₹50,000 unauthorized credit card transaction',
];

export const RulebookSelector: React.FC<RulebookSelectorProps> = ({
  rulebooks,
  selectedCity = 'Delhi (NCR)',
  onSelectRulebook,
  onLaunchAICase,
  onSaveAICaseToCloud,
  onViewAllRulebooks,
  onAnalyzePrompt,
  onOpenGuidedIntake,
  onOpenRtiAuditor,
}) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isInputFocused, setIsInputFocused] = useState(false);
  const [selectedPdf, setSelectedPdf] = useState<File | null>(null);
  const [analyzing, setAnalyzing] = useState(false);
  const [analysisError, setAnalysisError] = useState<string | null>(null);
  const [aiAnalysis, setAiAnalysis] = useState<AIAnalysisResponse | null>(null);
  const [savedToCloudFeedback, setSavedToCloudFeedback] = useState(false);
  const [copiedBrief, setCopiedBrief] = useState(false);
  const [copiedRtiDraft, setCopiedRtiDraft] = useState(false);

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handlePdfUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
        setSelectedPdf(file);
        if (!searchQuery.trim()) {
          setSearchQuery(`Document Attached: ${file.name}`);
        }
      } else {
        alert('Please select a valid PDF file.');
      }
    }
  };

  const handleRemovePdf = () => {
    setSelectedPdf(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    if (searchQuery.startsWith('Document Attached:')) {
      setSearchQuery('');
    }
  };

  const handleAnalyze = async (textToAnalyze?: string) => {
    let text = (textToAnalyze ?? searchQuery).trim();
    if (!text && !selectedPdf) {
      text = SAMPLE_SCENARIOS[0];
      setSearchQuery(text);
    } else if (!text && selectedPdf) {
      text = `Analyze attached document: ${selectedPdf.name}`;
      setSearchQuery(text);
    }

    setAnalyzing(true);
    setAnalysisError(null);
    setAiAnalysis(null);
    setSavedToCloudFeedback(false);

    try {
      const result = await analyzeIssueApi(text, selectedCity, selectedPdf || undefined);
      setAiAnalysis(result);
    } catch (err: any) {
      console.error('Error analyzing grievance:', err);
      setAnalysisError(err?.message || 'Failed to reach AI analysis engine. Please try again.');
    } finally {
      setAnalyzing(false);
    }
  };

  const handleCopyBrief = () => {
    if (!aiAnalysis) return;
    const briefText = `CASE BRIEF:
Title: ${aiAnalysis.title}
Statute: ${aiAnalysis.statute}
Category: ${aiAnalysis.category}
Authority: ${aiAnalysis.officer.name} (${aiAnalysis.officer.title}, ${aiAnalysis.officer.department})
Statutory Window: ${aiAnalysis.daysRemaining} days

CIVIC RIGHTS:
${aiAnalysis.civicRights?.map((r) => `• ${r}`).join('\n') || 'N/A'}

${aiAnalysis.pdfSummary ? `DOCUMENT SUMMARY:\n${aiAnalysis.pdfSummary}\n\n` : ''}DRAFTED RTI APPLICATION:
${aiAnalysis.draftedRti || aiAnalysis.formalLetter}

LEGAL ASSESSMENT:
${aiAnalysis.legalDiagnosis}`;

    navigator.clipboard.writeText(briefText);
    setCopiedBrief(true);
    setTimeout(() => setCopiedBrief(false), 2500);
  };

  const handleCopyRtiDraft = () => {
    if (!aiAnalysis) return;
    const textToCopy = aiAnalysis.draftedRti || aiAnalysis.formalLetter || '';
    navigator.clipboard.writeText(textToCopy);
    setCopiedRtiDraft(true);
    setTimeout(() => setCopiedRtiDraft(false), 2500);
  };

  const handleSaveToCloud = async () => {
    if (!aiAnalysis || !onSaveAICaseToCloud) return;
    try {
      await onSaveAICaseToCloud(aiAnalysis, searchQuery || selectedPdf?.name || SAMPLE_SCENARIOS[0]);
      setSavedToCloudFeedback(true);
      setTimeout(() => setSavedToCloudFeedback(false), 3000);
    } catch (err) {
      console.error('Failed to save to cloud:', err);
    }
  };

  return (
    <div className="w-full flex-grow flex flex-col items-center max-w-[1280px] mx-auto px-4 sm:px-8 md:px-10 py-6 sm:py-8">
      {/* Hero Section */}
      <section className="w-full max-w-4xl flex flex-col items-center text-center gap-5 mb-10 mt-2">
        <h1 className="font-headline text-[34px] sm:text-[44px] font-bold text-[#0F172A] tracking-tight leading-tight">
          <FoldText
            text="What issue are you facing?"
            hoverEffect={false}
            stagger={0.03}
            duration={0.65}
            perspective={1000}
            foldDirection="top"
          />
        </h1>

        {/* Subheading with Rotating Badge */}
        <div className="text-[15px] sm:text-[17px] text-[#475569] leading-normal flex flex-wrap items-center justify-center gap-2 max-w-3xl">
          <span>Generate statutory legal notices and filings for</span>
          <div className="inline-flex items-center justify-center min-h-[38px] px-3.5 py-1 rounded-lg bg-white text-[#006c4a] border border-[#CBD5E1] shadow-xs">
            <RotatingText
              texts={[
                'Right to Information (RTI)',
                'Consumer Refunds & Deficiencies',
                'Tenancy & Deposit Disputes',
                'Unpaid Salary & Labor Dues',
                'Banking Fraud & Chargebacks',
              ]}
              rotationInterval={2800}
              staggerDuration={0.02}
              elementLevelClassName="text-[#006c4a] font-bold font-headline text-[14.5px] sm:text-[16px]"
            />
          </div>
        </div>

        {/* Quick Action Badges */}
        <div className="flex flex-wrap items-center justify-center gap-3 pt-1">
          <button
            onClick={() => onOpenGuidedIntake && onOpenGuidedIntake('consumer')}
            className="bg-[#006c4a] hover:bg-[#005137] text-white text-[13px] font-semibold px-4 py-2 rounded-xl flex items-center gap-1.5 transition-all shadow-xs cursor-pointer hover:scale-[1.02]"
          >
            <span className="material-symbols-outlined text-[17px]">add_circle</span>
            <span>New Filing Draft</span>
          </button>

          <button
            onClick={() => onOpenRtiAuditor && onOpenRtiAuditor()}
            className="bg-white hover:bg-[#F8FAFC] border border-[#CBD5E1] hover:border-[#006c4a] text-[#0F172A] text-[13px] font-semibold px-4 py-2 rounded-xl flex items-center gap-1.5 transition-all shadow-2xs cursor-pointer hover:scale-[1.02]"
          >
            <span className="material-symbols-outlined text-[17px] text-[#006c4a]">verified</span>
            <span>Audit RTI Strength & PDFs</span>
          </button>
        </div>

        {/* Search & PDF Attachment Bar */}
        <div className="w-full flex flex-col gap-2 mt-3">
          <div className="w-full relative group">
            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#64748B] z-20">
              <span className="material-symbols-outlined text-[22px]">search</span>
            </div>

            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onFocus={() => setIsInputFocused(true)}
              onBlur={() => setIsInputFocused(false)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') handleAnalyze();
              }}
              placeholder={selectedPdf ? `Attached: ${selectedPdf.name}` : ''}
              className="w-full pl-12 pr-48 py-4 rounded-xl bg-white border border-[#CBD5E1] focus:border-[#0F172A] focus:ring-2 focus:ring-[#0F172A]/10 text-[15px] sm:text-[16px] text-[#0F172A] shadow-sm transition-all duration-200"
            />

            {!searchQuery && !selectedPdf && !isInputFocused && (
              <div className="absolute inset-y-0 left-12 right-48 flex items-center pointer-events-none text-[#64748B] text-[14px] sm:text-[15.5px] truncate overflow-hidden">
                <span className="text-[#94A3B8] mr-1.5 shrink-0 hidden sm:inline">e.g.</span>
                <TextType
                  text={SAMPLE_SCENARIOS}
                  typingSpeed={35}
                  deletingSpeed={18}
                  pauseDuration={2400}
                  cursor="▍"
                  cursorClassName="text-[#006c4a] font-normal"
                  className="text-[#64748B] truncate"
                />
              </div>
            )}

            {/* Clear button */}
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
                className="absolute inset-y-0 right-44 sm:right-48 px-2 text-[#94A3B8] hover:text-[#0F172A] flex items-center cursor-pointer z-20"
                title="Clear text"
              >
                <span className="material-symbols-outlined text-[18px]">cancel</span>
              </button>
            )}

            {/* Action Group: PDF Upload + Analyze */}
            <div className="absolute inset-y-2 right-2 flex items-center gap-1.5 z-20">
              <input
                ref={fileInputRef}
                type="file"
                id="pdfUploadInput"
                accept=".pdf,application/pdf"
                onChange={handlePdfUpload}
                className="hidden"
              />

              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className={`h-full px-3 rounded-lg border text-[13px] font-semibold flex items-center gap-1 transition-all cursor-pointer ${
                  selectedPdf
                    ? 'bg-[#ECFDF5] border-[#86EFAC] text-[#006c4a]'
                    : 'bg-[#F8FAFC] hover:bg-[#F1F5F9] border-[#CBD5E1] text-[#475569]'
                }`}
                title="Upload RTI or Legal PDF document for analysis"
              >
                <span className="material-symbols-outlined text-[18px] text-[#006c4a]">
                  {selectedPdf ? 'task' : 'upload_file'}
                </span>
                <span className="hidden sm:inline">{selectedPdf ? 'PDF Attached' : 'Attach PDF'}</span>
              </button>

              <button
                onClick={() => handleAnalyze()}
                disabled={analyzing}
                className="h-full px-4 sm:px-5 bg-[#006c4a] hover:bg-[#005137] text-white rounded-lg font-semibold text-[14px] transition-all flex items-center justify-center gap-1.5 cursor-pointer shadow-sm disabled:opacity-75"
              >
                {analyzing ? (
                  <>
                    <span className="material-symbols-outlined text-[18px] animate-spin">sync</span>
                    <span className="hidden sm:inline">Analyzing...</span>
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined text-[18px]">bolt</span>
                    <span>Analyze</span>
                  </>
                )}
              </button>
            </div>
          </div>

          {/* Attached File Indicator */}
          {selectedPdf && (
            <div className="flex items-center justify-between bg-[#F0FDF4] border border-[#BBF7D0] px-3.5 py-1.5 rounded-lg text-[13px] text-[#166534] animate-in fade-in duration-200">
              <div className="flex items-center gap-2 truncate">
                <span className="material-symbols-outlined text-[18px] text-[#006c4a]">picture_as_pdf</span>
                <span className="font-semibold truncate">{selectedPdf.name}</span>
                <span className="text-[11.5px] text-[#15803D]">({(selectedPdf.size / 1024).toFixed(1)} KB)</span>
              </div>
              <button
                type="button"
                onClick={handleRemovePdf}
                className="text-[#15803D] hover:text-[#DC2626] flex items-center gap-0.5 text-[12px] font-semibold ml-2 cursor-pointer transition-colors"
                title="Remove attached PDF"
              >
                <span className="material-symbols-outlined text-[16px]">close</span>
                <span>Remove</span>
              </button>
            </div>
          )}
        </div>

        {/* Quick Scenario Buttons */}
        <div className="flex flex-wrap items-center justify-center gap-2 pt-1 text-[12px] text-[#64748B]">
          <span className="font-semibold text-[#475569]">Quick Scenarios:</span>
          {SAMPLE_SCENARIOS.map((prompt, idx) => (
            <button
              key={idx}
              onClick={() => {
                setSearchQuery(prompt);
                handleAnalyze(prompt);
              }}
              className="bg-white hover:bg-[#F1F5F9] border border-[#E2E8F0] hover:border-[#CBD5E1] text-[#475569] px-3 py-1 rounded-full text-left transition-colors cursor-pointer shadow-2xs"
            >
              {prompt.length > 40 ? `${prompt.slice(0, 40)}...` : prompt}
            </button>
          ))}
        </div>

        {/* Error message */}
        {analysisError && (
          <div className="w-full text-left bg-[#FEF2F2] border border-[#FCA5A5] rounded-xl p-4 text-[#991B1B] text-[14px] flex items-start gap-3 shadow-xs">
            <span className="material-symbols-outlined text-[20px] text-[#DC2626] shrink-0 mt-0.5">error</span>
            <div className="flex-grow">
              <p className="font-semibold">Analysis Notice</p>
              <p className="text-[13px] mt-0.5">{analysisError}</p>
              <button
                onClick={() => handleAnalyze(SAMPLE_SCENARIOS[0])}
                className="mt-2 bg-[#DC2626] text-white text-[12px] font-semibold px-3 py-1 rounded-md cursor-pointer hover:bg-[#B91C1C] transition-colors inline-flex items-center gap-1"
              >
                <span>Retry with Standard Scenario</span>
              </button>
            </div>
          </div>
        )}

        {/* AI Analysis Results Dashboard */}
        {aiAnalysis && (
          <div className="w-full text-left bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-md animate-in fade-in slide-in-from-top-4 duration-300 flex flex-col gap-5">
            {/* Header Strip */}
            <div className="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
              <div className="flex flex-wrap items-center gap-2">
                <span className="inline-flex items-center gap-1 text-[12px] font-bold text-[#006c4a] bg-[#ECFDF5] px-3 py-1 rounded-full border border-[#A7F3D0]">
                  <span className="material-symbols-outlined text-[15px]">verified</span>
                  <span>{aiAnalysis.category}</span>
                </span>
                <span className="inline-flex items-center text-[12px] font-medium text-[#475569] bg-[#F8FAFC] px-3 py-1 rounded-full border border-[#E2E8F0]">
                  Statute: {aiAnalysis.statute}
                </span>
              </div>

              <div className="flex items-center gap-3">
                <div className="flex items-center gap-1.5 bg-[#FFFBEB] border border-[#FDE68A] text-[#92400E] px-3 py-1 rounded-full text-[12px] font-semibold">
                  <span className="material-symbols-outlined text-[15px]">schedule</span>
                  <span>Statutory Clock: {aiAnalysis.daysRemaining} Days</span>
                </div>
                <div className="flex items-center gap-1.5 bg-[#ECFDF5] border border-[#86EFAC] text-[#166534] px-3 py-1 rounded-full text-[12px] font-bold">
                  <span className="material-symbols-outlined text-[15px]">thumb_up</span>
                  <span>Viability: {aiAnalysis.initialScore || 88}%</span>
                </div>
              </div>
            </div>

            {/* Case Title & Legal Assessment */}
            <div>
              <h2 className="font-headline text-[21px] sm:text-[23px] font-bold text-[#0F172A]">
                {aiAnalysis.title}
              </h2>
              <p className="text-[14px] text-[#334155] mt-2 leading-relaxed bg-[#F8FAFC] p-3.5 rounded-xl border border-[#E2E8F0]">
                <strong className="text-[#0F172A] font-semibold">Legal Assessment: </strong>
                {aiAnalysis.legalDiagnosis}
              </p>
            </div>

            {/* 1. Civic Rights Box */}
            <div className="bg-[#F0FDF4] border border-[#BBF7D0] rounded-xl p-4 sm:p-5 flex flex-col gap-3">
              <div className="flex items-center justify-between">
                <h3 className="font-headline text-[15.5px] font-bold text-[#166534] flex items-center gap-2">
                  <span className="material-symbols-outlined text-[#006c4a] text-[20px]">balance</span>
                  <span>Your Civic Rights & Legal Standing</span>
                </h3>
                <span className="text-[11.5px] font-bold text-[#15803D] bg-white px-2.5 py-0.5 rounded-full border border-[#86EFAC]">
                  Statutory Entitlements
                </span>
              </div>

              <ul className="flex flex-col gap-2 pt-1">
                {aiAnalysis.civicRights && aiAnalysis.civicRights.length > 0 ? (
                  aiAnalysis.civicRights.map((right, index) => (
                    <li key={index} className="flex items-start gap-2.5 text-[13.5px] text-[#14532D] leading-relaxed">
                      <span className="material-symbols-outlined text-[#006c4a] text-[18px] shrink-0 mt-0.5">
                        check_circle
                      </span>
                      <span>{right}</span>
                    </li>
                  ))
                ) : (
                  <li className="text-[13px] text-[#15803D]">
                    You have the right to seek information, demand accountability, and obtain verified responses under statutory laws.
                  </li>
                )}
              </ul>
            </div>

            {/* 2. Document Summary Box */}
            {(aiAnalysis.pdfSummary || selectedPdf) && (
              <div className="bg-[#EFF6FF] border border-[#BFDBFE] rounded-xl p-4 sm:p-5 flex flex-col gap-3">
                <div className="flex items-center justify-between">
                  <h3 className="font-headline text-[15px] font-bold text-[#1E40AF] flex items-center gap-2">
                    <span className="material-symbols-outlined text-[#2563EB] text-[20px]">description</span>
                    <span>Document Summary (Plain English)</span>
                  </h3>
                  <span className="text-[11.5px] font-semibold text-[#1E40AF] bg-white px-2.5 py-0.5 rounded-full border border-[#93C5FD]">
                    {selectedPdf ? selectedPdf.name : 'Analyzed Document'}
                  </span>
                </div>
                <div className="text-[13.5px] text-[#1E3A8A] leading-relaxed whitespace-pre-wrap bg-white/80 p-3.5 rounded-lg border border-[#DBEAFE]">
                  {aiAnalysis.pdfSummary || `Uploaded file "${selectedPdf?.name}" was analyzed and distilled into actionable civic rights and RTI queries.`}
                </div>
              </div>
            )}

            {/* 3. Drafted RTI Application Box */}
            <div className="bg-white border border-[#CBD5E1] rounded-xl p-4 sm:p-5 flex flex-col gap-3 shadow-xs">
              <div className="flex items-center justify-between gap-2">
                <h3 className="font-headline text-[15.5px] font-bold text-[#0F172A] flex items-center gap-2">
                  <span className="material-symbols-outlined text-[#006c4a] text-[20px]">edit_document</span>
                  <span>Drafted RTI Application</span>
                </h3>

                <button
                  type="button"
                  onClick={handleCopyRtiDraft}
                  className="bg-[#F8FAFC] hover:bg-[#F1F5F9] text-[#0F172A] border border-[#CBD5E1] text-[12px] font-semibold px-3 py-1 rounded-lg flex items-center gap-1.5 transition-colors cursor-pointer"
                >
                  <span className="material-symbols-outlined text-[15px] text-[#006c4a]">
                    {copiedRtiDraft ? 'done' : 'content_copy'}
                  </span>
                  <span>{copiedRtiDraft ? 'Draft Copied!' : 'Copy RTI Draft'}</span>
                </button>
              </div>

              <div className="relative">
                <pre className="p-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl font-mono text-[12.5px] sm:text-[13px] text-[#0F172A] leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto select-text">
                  {aiAnalysis.draftedRti || aiAnalysis.formalLetter}
                </pre>
              </div>
            </div>

            {/* Routing Authority & Protections Bar */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
              <div className="p-3 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex items-center gap-3">
                <div className="w-9 h-9 rounded-lg bg-[#ECFDF5] text-[#006c4a] flex items-center justify-center font-bold text-[13px] shrink-0">
                  {aiAnalysis.officer.avatar || 'AO'}
                </div>
                <div className="min-w-0">
                  <span className="text-[11px] font-bold uppercase text-[#64748B] block">Routing Authority</span>
                  <p className="text-[13px] font-bold text-[#0F172A] truncate">{aiAnalysis.officer.name}</p>
                  <p className="text-[11.5px] text-[#64748B] truncate">{aiAnalysis.officer.department}</p>
                </div>
              </div>

              <div className="p-3 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex items-center gap-3">
                <div className="w-9 h-9 rounded-lg bg-[#EFF6FF] text-[#2563EB] flex items-center justify-center shrink-0">
                  <span className="material-symbols-outlined text-[20px]">shield</span>
                </div>
                <div className="min-w-0">
                  <span className="text-[11px] font-bold uppercase text-[#64748B] block">Privacy & Security</span>
                  <p className="text-[13px] font-bold text-[#0F172A]">PII Masking Active</p>
                  <p className="text-[11.5px] text-[#64748B]">Personal details auto-redacted before submission</p>
                </div>
              </div>
            </div>

            {/* Action Bar */}
            <div className="pt-4 border-t border-[#E2E8F0] flex flex-col sm:flex-row items-center justify-between gap-3">
              <div className="flex items-center gap-2 w-full sm:w-auto">
                <button
                  onClick={handleCopyBrief}
                  className="bg-[#F8FAFC] hover:bg-[#F1F5F9] text-[#0F172A] font-medium text-[13px] px-3.5 py-2.5 rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer border border-[#CBD5E1] shadow-2xs"
                >
                  <span className="material-symbols-outlined text-[16px]">
                    {copiedBrief ? 'check' : 'content_copy'}
                  </span>
                  <span>{copiedBrief ? 'Brief Copied!' : 'Copy Summary'}</span>
                </button>

                {onSaveAICaseToCloud && (
                  <button
                    onClick={handleSaveToCloud}
                    className="bg-[#F8FAFC] hover:bg-[#F1F5F9] text-[#006c4a] font-medium text-[13px] px-3.5 py-2.5 rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer border border-[#86EFAC] shadow-2xs"
                  >
                    <span className="material-symbols-outlined text-[16px]">
                      {savedToCloudFeedback ? 'done_all' : 'cloud_upload'}
                    </span>
                    <span>{savedToCloudFeedback ? 'Saved to Cloud!' : 'Save Case'}</span>
                  </button>
                )}
              </div>

              <div className="flex items-center gap-3 w-full sm:w-auto">
                <button
                  onClick={() => {
                    setAiAnalysis(null);
                    setSearchQuery('');
                    handleRemovePdf();
                  }}
                  className="text-[#64748B] hover:text-[#0F172A] text-[13px] font-medium px-3 py-2 cursor-pointer transition-colors"
                >
                  Clear
                </button>

                <button
                  onClick={() => {
                    const promptToUse = searchQuery || selectedPdf?.name || SAMPLE_SCENARIOS[0];
                    onAnalyzePrompt(promptToUse);
                    if (onLaunchAICase) {
                      onLaunchAICase(aiAnalysis, promptToUse);
                    } else {
                      onSelectRulebook(aiAnalysis.rulebookId, promptToUse);
                    }
                  }}
                  className="bg-[#006c4a] hover:bg-[#005137] text-white font-bold text-[14px] px-6 py-3 rounded-xl flex items-center justify-center gap-2 transition-all cursor-pointer shadow-md hover:scale-[1.01] w-full sm:w-auto"
                >
                  <span>Open Full Drafting Workspace</span>
                  <span className="material-symbols-outlined text-[18px]">arrow_forward</span>
                </button>
              </div>
            </div>
          </div>
        )}
      </section>

      {/* Statutory Filing Templates Catalog */}
      <section className="w-full mb-12">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-6 gap-4">
          <div>
            <h2 className="font-headline text-[28px] sm:text-[32px] font-bold text-[#0F172A] tracking-tight mb-1">
              Statutory Filing Templates
            </h2>
            <p className="text-[15px] text-[#64748B]">
              Select a statutory template to assess your rights and draft a legally binding notice.
            </p>
          </div>

          <button
            onClick={onViewAllRulebooks}
            className="flex items-center gap-1.5 text-[#0F172A] hover:text-[#006c4a] font-semibold text-[14px] transition-colors cursor-pointer group"
          >
            <span>View All Templates</span>
            <span className="material-symbols-outlined text-[18px] group-hover:translate-x-0.5 transition-transform">
              arrow_forward
            </span>
          </button>
        </div>

        {/* 2x2 Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Card 1: RTI */}
          <div
            onClick={() => onOpenGuidedIntake ? onOpenGuidedIntake('rti') : onSelectRulebook('rti')}
            className="bg-white border border-[#CBD5E1] rounded-xl p-6 flex flex-col gap-4 hover:border-[#006c4a] hover:shadow-md transition-all duration-200 group cursor-pointer relative overflow-hidden"
          >
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3.5">
                <div className="w-12 h-12 rounded-lg bg-[#0F172A]/5 flex items-center justify-center border border-[#0F172A]/10 text-[#0F172A] group-hover:bg-[#006c4a] group-hover:text-white transition-colors">
                  <span className="material-symbols-outlined text-[24px]">description</span>
                </div>
                <div>
                  <h3 className="font-headline text-[20px] font-bold text-[#0F172A] group-hover:text-[#006c4a] transition-colors">
                    Right to Information (RTI)
                  </h3>
                  <span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2 py-0.5 rounded uppercase tracking-wider">
                    ACTIVE TEMPLATE
                  </span>
                </div>
              </div>
            </div>

            <p className="text-[14px] text-[#475569] leading-relaxed flex-grow">
              File formal requests to access certified records, file notesheets, tender expenditures, or status reports held by public authorities under RTI Act 2005.
            </p>

            <div className="pt-4 border-t border-[#E2E8F0] flex items-center justify-between">
              <div className="flex items-center gap-1.5 text-[#64748B] text-[13px]">
                <span className="material-symbols-outlined text-[16px]">timer</span>
                <span>Est. 15 mins to draft</span>
              </div>
              <button className="bg-[#0F172A] group-hover:bg-[#006c4a] text-white px-4 py-2 rounded-lg text-[13px] font-medium transition-colors flex items-center gap-1.5">
                <span>Start Filing</span>
                <span className="material-symbols-outlined text-[16px]">arrow_right_alt</span>
              </button>
            </div>
          </div>

          {/* Card 2: Consumer Disputes */}
          <div
            onClick={() => onOpenGuidedIntake ? onOpenGuidedIntake('consumer') : onSelectRulebook('consumer')}
            className="bg-white border border-[#CBD5E1] rounded-xl p-6 flex flex-col gap-4 hover:border-[#006c4a] hover:shadow-md transition-all duration-200 group cursor-pointer relative overflow-hidden"
          >
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3.5">
                <div className="w-12 h-12 rounded-lg bg-[#0F172A]/5 flex items-center justify-center border border-[#0F172A]/10 text-[#0F172A] group-hover:bg-[#006c4a] group-hover:text-white transition-colors">
                  <span className="material-symbols-outlined text-[24px]">shopping_bag</span>
                </div>
                <div>
                  <h3 className="font-headline text-[20px] font-bold text-[#0F172A] group-hover:text-[#006c4a] transition-colors">
                    Consumer Disputes & Refunds
                  </h3>
                  <span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2 py-0.5 rounded uppercase tracking-wider">
                    ACTIVE TEMPLATE
                  </span>
                </div>
              </div>
            </div>

            <p className="text-[14px] text-[#475569] leading-relaxed flex-grow">
              Demand full refunds, replacements, or damages from sellers, airlines, or service providers for defective goods and service deficiencies under Consumer Protection Act 2019.
            </p>

            <div className="pt-4 border-t border-[#E2E8F0] flex items-center justify-between">
              <div className="flex items-center gap-1.5 text-[#64748B] text-[13px]">
                <span className="material-symbols-outlined text-[16px]">timer</span>
                <span>Est. 20 mins to draft</span>
              </div>
              <button className="bg-[#0F172A] group-hover:bg-[#006c4a] text-white px-4 py-2 rounded-lg text-[13px] font-medium transition-colors flex items-center gap-1.5">
                <span>Start Filing</span>
                <span className="material-symbols-outlined text-[16px]">arrow_right_alt</span>
              </button>
            </div>
          </div>

          {/* Card 3: Tenancy Notice */}
          <div
            onClick={() => onOpenGuidedIntake ? onOpenGuidedIntake('tenancy') : onSelectRulebook('tenancy')}
            className="bg-white border border-[#CBD5E1] rounded-xl p-6 flex flex-col gap-4 hover:border-[#006c4a] hover:shadow-md transition-all duration-200 group cursor-pointer relative overflow-hidden"
          >
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3.5">
                <div className="w-12 h-12 rounded-lg bg-[#0F172A]/5 flex items-center justify-center border border-[#0F172A]/10 text-[#0F172A] group-hover:bg-[#006c4a] group-hover:text-white transition-colors">
                  <span className="material-symbols-outlined text-[24px]">home_work</span>
                </div>
                <div>
                  <h3 className="font-headline text-[20px] font-bold text-[#0F172A] group-hover:text-[#006c4a] transition-colors">
                    Tenancy & Security Deposit Notice
                  </h3>
                  <span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2 py-0.5 rounded uppercase tracking-wider">
                    ACTIVE TEMPLATE
                  </span>
                </div>
              </div>
            </div>

            <p className="text-[14px] text-[#475569] leading-relaxed flex-grow">
              Statutory pre-litigation notices for landlords unlawfully withholding rental deposits, arbitrary deductions, or illegal eviction notices under Tenancy Acts.
            </p>

            <div className="pt-4 border-t border-[#E2E8F0] flex items-center justify-between">
              <div className="flex items-center gap-1.5 text-[#64748B] text-[13px]">
                <span className="material-symbols-outlined text-[16px]">timer</span>
                <span>Est. 15 mins to draft</span>
              </div>
              <button className="bg-[#0F172A] group-hover:bg-[#006c4a] text-white px-4 py-2 rounded-lg text-[13px] font-medium transition-colors flex items-center gap-1.5">
                <span>Start Filing</span>
                <span className="material-symbols-outlined text-[16px]">arrow_right_alt</span>
              </button>
            </div>
          </div>

          {/* Card 4: Wage Recovery */}
          <div
            onClick={() => onOpenGuidedIntake ? onOpenGuidedIntake('employment') : onSelectRulebook('employment')}
            className="bg-white border border-[#CBD5E1] rounded-xl p-6 flex flex-col gap-4 hover:border-[#006c4a] hover:shadow-md transition-all duration-200 group cursor-pointer relative overflow-hidden"
          >
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3.5">
                <div className="w-12 h-12 rounded-lg bg-[#0F172A]/5 flex items-center justify-center border border-[#0F172A]/10 text-[#0F172A] group-hover:bg-[#006c4a] group-hover:text-white transition-colors">
                  <span className="material-symbols-outlined text-[24px]">payments</span>
                </div>
                <div>
                  <h3 className="font-headline text-[20px] font-bold text-[#0F172A] group-hover:text-[#006c4a] transition-colors">
                    Wage Recovery & Labor Settlement
                  </h3>
                  <span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2 py-0.5 rounded uppercase tracking-wider">
                    ACTIVE TEMPLATE
                  </span>
                </div>
              </div>
            </div>

            <p className="text-[14px] text-[#475569] leading-relaxed flex-grow">
              Formal demand notices for unpaid salary, withheld full & final settlement (F&F), gratuity, and relieving certificates under Payment of Wages and Labor laws.
            </p>

            <div className="pt-4 border-t border-[#E2E8F0] flex items-center justify-between">
              <div className="flex items-center gap-1.5 text-[#64748B] text-[13px]">
                <span className="material-symbols-outlined text-[16px]">timer</span>
                <span>Est. 18 mins to draft</span>
              </div>
              <button className="bg-[#0F172A] group-hover:bg-[#006c4a] text-white px-4 py-2 rounded-lg text-[13px] font-medium transition-colors flex items-center gap-1.5">
                <span>Start Filing</span>
                <span className="material-symbols-outlined text-[16px]">arrow_right_alt</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};