Upload folder using huggingface_hub

50a8ea3 verified 2 months ago

20.3 kB

import React, { useState, useRef, useEffect } from 'react';
import { auditRtiApi, analyzeDocumentApi, RtiAuditResponse } from '../services/api';

interface RtiAuditorModalProps {
  selectedCity: string;
  onClose: () => void;
  onLaunchRtiCase?: (optimizedDraft: string, title: string) => void;
}

const SAMPLE_RTI_DRAFTS = [
  {
    title: 'Ward Road Resurfacing Tender & Quality Audit',
    text: 'Why is the road work in Ward 150 delayed? Who is the contractor and why did it develop potholes within 3 months? When will it be repaired?',
  },
  {
    title: 'Building Plan Sanction File Movement',
    text: 'Please inform me why my building plan sanction application #BBMP/LP/2024/890 is still pending after 60 days. Which officer is sitting on the file?',
  },
  {
    title: 'Police Action-Taken Report on NCR',
    text: 'What action has been taken on my complaint filed on 10th August? Why has the FIR not been registered yet and who investigated it?',
  },
];

export const RtiAuditorModal: React.FC<RtiAuditorModalProps> = ({
  selectedCity,
  onClose,
  onLaunchRtiCase,
}) => {
  const [rtiText, setRtiText] = useState(SAMPLE_RTI_DRAFTS[0].text);
  const [auditing, setAuditing] = useState(false);
  const [auditResult, setAuditResult] = useState<RtiAuditResponse | null>(null);
  const [auditError, setAuditError] = useState<string | null>(null);
  const [copiedDraft, setCopiedDraft] = useState(false);

  // Document / PDF Upload State
  const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
  const [isProcessingFile, setIsProcessingFile] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Close on Escape key press
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [onClose]);

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploadedFileName(file.name);
    setIsProcessingFile(true);
    setAuditError(null);

    const reader = new FileReader();
    reader.onload = async () => {
      const result = reader.result as string;
      const base64Data = result.split(',')[1] || result;

      try {
        setAuditing(true);
        // Extract text & diagnosis using document analysis
        const docAnalysis = await analyzeDocumentApi({
          fileBase64: base64Data,
          mimeType: file.type || 'application/pdf',
          fileName: file.name,
          jurisdiction: selectedCity,
        });

        if (docAnalysis) {
          const extractedGrievance = `${docAnalysis.title}\n${docAnalysis.legalDiagnosis || ''}\n${docAnalysis.requestScope || ''}`.trim();
          setRtiText(extractedGrievance);
          // Run RTI quality audit on the extracted text
          const audit = await auditRtiApi(extractedGrievance, selectedCity);
          setAuditResult(audit);
        }
      } catch (err: any) {
        console.error('PDF extraction error in RTI auditor:', err);
        setAuditError(err?.message || 'Could not extract text from document. Please copy-paste text instead.');
      } finally {
        setIsProcessingFile(false);
        setAuditing(false);
      }
    };
    reader.onerror = () => {
      setIsProcessingFile(false);
      setAuditError('Failed to read the uploaded document.');
    };
    reader.readAsDataURL(file);
  };

  const handleRunAudit = async (customText?: string) => {
    const text = customText !== undefined ? customText : rtiText;
    if (!text.trim()) return;

    setAuditing(true);
    setAuditError(null);
    try {
      const res = await auditRtiApi(text, selectedCity);
      setAuditResult(res);
    } catch (err: any) {
      console.error('RTI Audit error:', err);
      setAuditError(err?.message || 'Failed to complete RTI audit. Please retry.');
    } finally {
      setAuditing(false);
    }
  };

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedDraft(true);
    setTimeout(() => setCopiedDraft(false), 2500);
  };

  return (
    <div
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onClose();
        }
      }}
      className="fixed inset-0 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200 cursor-pointer"
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl border border-[#CBD5E1] overflow-hidden cursor-default"
      >
        {/* Header */}
        <div className="px-6 py-4 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-[#006c4a]/10 text-[#006c4a] flex items-center justify-center font-bold">
              <span className="material-symbols-outlined text-[24px]">verified</span>
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="font-headline font-bold text-[18px] sm:text-[20px] text-[#0F172A]">
                  RTI Strength & Quality Auditor
                </h2>
                <span className="text-[11px] font-bold text-[#166534] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full border border-[#BBF7D0]">
                  RTI Act 2005 Compliance
                </span>
              </div>
              <p className="text-[12.5px] text-[#64748B]">
                Audit draft questions or upload rejection letters/PDFs to get a reject-proof statutory RTI draft
              </p>
            </div>
          </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>

        {/* Body */}
        <div className="p-6 overflow-y-auto flex-grow flex flex-col gap-6">
          {/* Input & PDF Upload Section */}
          <div className="flex flex-col gap-3">
            {/* PDF Upload Banner */}
            <div className="p-3.5 bg-[#F8FAFC] border border-dashed border-[#CBD5E1] rounded-xl flex flex-col sm:flex-row items-center justify-between gap-3">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-white border border-[#CBD5E1] flex items-center justify-center text-[#006c4a] shadow-xs shrink-0">
                  <span className="material-symbols-outlined text-[22px]">upload_file</span>
                </div>
                <div>
                  <p className="text-[13px] font-bold text-[#0F172A]">
                    {uploadedFileName ? `Loaded: ${uploadedFileName}` : 'Have an RTI Draft or Govt Rejection Order in PDF?'}
                  </p>
                  <p className="text-[11.5px] text-[#64748B]">
                    {uploadedFileName
                      ? 'Document extracted. Audit results generated below.'
                      : 'Upload PIO reply, Section 8 rejection letter, or application draft (PDF / Image)'}
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-2 shrink-0">
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handleFileUpload}
                  accept=".pdf,.png,.jpg,.jpeg,.txt,.doc,.docx"
                  className="hidden"
                />
                <button
                  type="button"
                  onClick={() => fileInputRef.current?.click()}
                  disabled={isProcessingFile || auditing}
                  className="bg-white hover:bg-[#F1F5F9] text-[#0F172A] border border-[#CBD5E1] font-semibold text-[12.5px] px-3.5 py-2 rounded-lg transition-colors cursor-pointer flex items-center gap-1.5 shadow-xs"
                >
                  <span className="material-symbols-outlined text-[16px]">
                    {isProcessingFile ? 'sync' : 'attach_file'}
                  </span>
                  <span>{uploadedFileName ? 'Upload Different PDF' : 'Upload PDF / Doc'}</span>
                </button>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <label className="text-[13px] font-bold text-[#0F172A]">
                Or Type / Paste Your RTI Questions:
              </label>
              <div className="flex items-center gap-1.5 text-[12px] text-[#64748B]">
                <span>Try sample:</span>
                {SAMPLE_RTI_DRAFTS.map((sample, idx) => (
                  <button
                    key={idx}
                    onClick={() => {
                      setRtiText(sample.text);
                      handleRunAudit(sample.text);
                    }}
                    className="text-[#006c4a] hover:underline font-semibold cursor-pointer"
                  >
                    #{idx + 1}
                  </button>
                ))}
              </div>
            </div>

            <textarea
              value={rtiText}
              onChange={(e) => setRtiText(e.target.value)}
              rows={4}
              placeholder="Paste or type what information you want from the government body..."
              className="w-full p-3.5 rounded-xl border border-[#CBD5E1] focus:border-[#006c4a] focus:ring-2 focus:ring-[#006c4a]/15 text-[14px] text-[#0F172A] outline-none shadow-inner"
            />

            <div className="flex items-center justify-between pt-1">
              <span className="text-[12px] text-[#64748B]">
                Jurisdiction: <strong className="text-[#0F172A]">{selectedCity}</strong>
              </span>
              <button
                onClick={() => handleRunAudit()}
                disabled={auditing || isProcessingFile || !rtiText.trim()}
                className="bg-[#006c4a] hover:bg-[#005137] text-white font-bold text-[13.5px] px-6 py-2.5 rounded-xl flex items-center gap-2 transition-all cursor-pointer shadow-sm disabled:opacity-60"
              >
                {auditing ? (
                  <>
                    <span className="material-symbols-outlined text-[18px] animate-spin">sync</span>
                    <span>Auditing RTI Quality...</span>
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined text-[18px]">verified_user</span>
                    <span>Audit RTI Strength Score</span>
                  </>
                )}
              </button>
            </div>
          </div>

          {auditError && (
            <div className="bg-[#FEF2F2] border border-[#FECACA] p-3.5 rounded-xl text-[#991B1B] text-[13px] flex items-center gap-2">
              <span className="material-symbols-outlined text-[18px]">error</span>
              <span>{auditError}</span>
            </div>
          )}

          {/* Audit Results Dashboard */}
          {auditResult && (
            <div className="flex flex-col gap-5 animate-in fade-in duration-200 border-t border-[#E2E8F0] pt-5">
              {/* Score & Verdict Banner */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-2xl p-5">
                {/* Score Dial */}
                <div className="md:col-span-1 flex flex-col items-center justify-center text-center p-3 bg-white rounded-xl border border-[#E2E8F0] shadow-xs">
                  <span className="text-[11px] font-bold uppercase tracking-wider text-[#64748B] mb-1">
                    RTI Strength Score
                  </span>
                  <div className="text-[42px] font-bold font-headline text-[#006c4a] leading-none">
                    {auditResult.score}
                    <span className="text-[20px] text-[#64748B]">/100</span>
                  </div>
                  <span
                    className={`mt-2 text-[12px] font-bold px-2.5 py-0.5 rounded-full ${
                      auditResult.score >= 85
                        ? 'bg-[#DCFCE7] text-[#166534]'
                        : auditResult.score >= 70
                        ? 'bg-[#FEF3C7] text-[#92400E]'
                        : 'bg-[#FEE2E2] text-[#991B1B]'
                    }`}
                  >
                    {auditResult.grade}
                  </span>
                </div>

                {/* Verdict Summary */}
                <div className="md:col-span-3 flex flex-col justify-center gap-2">
                  <div className="flex items-center justify-between">
                    <h3 className="font-headline font-bold text-[16px] text-[#0F172A]">
                      Statutory Audit Verdict
                    </h3>
                    <span className="text-[12px] font-bold text-[#166534] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full border border-[#BBF7D0]">
                      Est. Success Rate: {auditResult.estimatedSuccessRate || 92}%
                    </span>
                  </div>
                  <p className="text-[13.5px] text-[#334155] leading-relaxed">
                    {auditResult.verdictSummary}
                  </p>
                  {auditResult.exemptionsRiskAnalysis && (
                    <p className="text-[12px] text-[#64748B] bg-white p-2.5 rounded-lg border border-[#E2E8F0]">
                      <strong className="text-[#0F172A]">Exemption Risk: </strong>
                      {auditResult.exemptionsRiskAnalysis}
                    </p>
                  )}
                </div>
              </div>

              {/* 7-Point Compliance Checklist */}
              <div>
                <h4 className="font-headline font-bold text-[15px] text-[#0F172A] mb-3 flex items-center gap-1.5">
                  <span className="material-symbols-outlined text-[18px] text-[#006c4a]">checklist</span>
                  <span>7-Point Statutory Compliance Checklist</span>
                </h4>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {auditResult.checklist.map((item, idx) => (
                    <div
                      key={idx}
                      className={`p-3 rounded-xl border flex flex-col gap-1 text-[12.5px] ${
                        item.status === 'pass'
                          ? 'bg-[#F0FDF4] border-[#86EFAC]'
                          : item.status === 'warning'
                          ? 'bg-[#FFFBEB] border-[#FDE68A]'
                          : 'bg-[#FEF2F2] border-[#FECACA]'
                      }`}
                    >
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-[#0F172A] flex items-center gap-1.5">
                          <span
                            className={`material-symbols-outlined text-[16px] ${
                              item.status === 'pass'
                                ? 'text-[#166534]'
                                : item.status === 'warning'
                                ? 'text-[#D97706]'
                                : 'text-[#DC2626]'
                            }`}
                          >
                            {item.status === 'pass'
                              ? 'check_circle'
                              : item.status === 'warning'
                              ? 'warning'
                              : 'cancel'}
                          </span>
                          {item.item}
                        </span>
                        <span className="text-[11px] font-semibold text-[#475569] bg-white px-2 py-0.5 rounded border border-[#CBD5E1]">
                          {item.rule}
                        </span>
                      </div>
                      <p className="text-[#334155] mt-0.5">{item.finding}</p>
                      {item.statutoryFix && item.status !== 'pass' && (
                        <p className="text-[11.5px] text-[#92400E] font-medium mt-0.5">
                          <strong>Fix: </strong> {item.statutoryFix}
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              {/* Optimized Ready-to-Submit RTI Draft */}
              {auditResult.optimizedRtiDraft && (
                <div className="bg-white border-2 border-[#006c4a] rounded-2xl p-5 shadow-md flex flex-col gap-3">
                  <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[#E2E8F0] pb-3">
                    <div className="flex items-center gap-2">
                      <span className="material-symbols-outlined text-[#006c4a] text-[22px]">
                        auto_awesome
                      </span>
                      <h4 className="font-headline font-bold text-[16px] text-[#0F172A]">
                        Optimized & Bulletproof RTI Application
                      </h4>
                    </div>

                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleCopy(auditResult.optimizedRtiDraft)}
                        className="bg-[#F1F5F9] hover:bg-[#E2E8F0] text-[#0F172A] font-semibold text-[12.5px] px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors cursor-pointer border border-[#CBD5E1]"
                      >
                        <span className="material-symbols-outlined text-[15px]">
                          {copiedDraft ? 'check' : 'content_copy'}
                        </span>
                        <span>{copiedDraft ? 'Copied' : 'Copy Application'}</span>
                      </button>

                      {onLaunchRtiCase && (
                        <button
                          onClick={() => {
                            onLaunchRtiCase(
                              auditResult.optimizedRtiDraft,
                              `RTI: ${rtiText.slice(0, 40)}...`
                            );
                            onClose();
                          }}
                          className="bg-[#006c4a] hover:bg-[#005137] text-white font-bold text-[12.5px] px-4 py-1.5 rounded-lg flex items-center gap-1 transition-all cursor-pointer shadow-xs hover:scale-[1.02]"
                        >
                          <span>Open in Workspace</span>
                          <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
                        </button>
                      )}
                    </div>
                  </div>

                  <pre className="font-mono text-[12.5px] bg-[#F8FAFC] p-4 rounded-xl border border-[#E2E8F0] text-[#0F172A] whitespace-pre-wrap max-h-72 overflow-y-auto leading-relaxed">
                    {auditResult.optimizedRtiDraft}
                  </pre>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-3.5 border-t border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
          <span className="text-[12px] text-[#64748B]">
            Section 6(1) Right to Information Act 2005
          </span>
          <button
            onClick={onClose}
            className="bg-[#0F172A] hover:bg-[#1E293B] text-white font-semibold text-[13px] px-5 py-2 rounded-xl transition-colors cursor-pointer"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

	import React, { useState, useRef, useEffect } from 'react';
	import { auditRtiApi, analyzeDocumentApi, RtiAuditResponse } from '../services/api';

	interface RtiAuditorModalProps {
	selectedCity: string;
	onClose: () => void;
	onLaunchRtiCase?: (optimizedDraft: string, title: string) => void;
	}

	const SAMPLE_RTI_DRAFTS = [
	{
	title: 'Ward Road Resurfacing Tender & Quality Audit',
	text: 'Why is the road work in Ward 150 delayed? Who is the contractor and why did it develop potholes within 3 months? When will it be repaired?',
	},
	{
	title: 'Building Plan Sanction File Movement',
	text: 'Please inform me why my building plan sanction application #BBMP/LP/2024/890 is still pending after 60 days. Which officer is sitting on the file?',
	},
	{
	title: 'Police Action-Taken Report on NCR',
	text: 'What action has been taken on my complaint filed on 10th August? Why has the FIR not been registered yet and who investigated it?',
	},
	];

	export const RtiAuditorModal: React.FC<RtiAuditorModalProps> = ({
	selectedCity,
	onClose,
	onLaunchRtiCase,
	}) => {
	const [rtiText, setRtiText] = useState(SAMPLE_RTI_DRAFTS[0].text);
	const [auditing, setAuditing] = useState(false);
	const [auditResult, setAuditResult] = useState<RtiAuditResponse \| null>(null);
	const [auditError, setAuditError] = useState<string \| null>(null);
	const [copiedDraft, setCopiedDraft] = useState(false);

	// Document / PDF Upload State
	const [uploadedFileName, setUploadedFileName] = useState<string \| null>(null);
	const [isProcessingFile, setIsProcessingFile] = useState(false);
	const fileInputRef = useRef<HTMLInputElement>(null);

	// Close on Escape key press
	useEffect(() => {
	const handleKeyDown = (e: KeyboardEvent) => {
	if (e.key === 'Escape') {
	onClose();
	}
	};
	window.addEventListener('keydown', handleKeyDown);
	return () => window.removeEventListener('keydown', handleKeyDown);
	}, [onClose]);

	const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
	const file = e.target.files?.[0];
	if (!file) return;

	setUploadedFileName(file.name);
	setIsProcessingFile(true);
	setAuditError(null);

	const reader = new FileReader();
	reader.onload = async () => {
	const result = reader.result as string;
	const base64Data = result.split(',')[1] \|\| result;

	try {
	setAuditing(true);
	// Extract text & diagnosis using document analysis
	const docAnalysis = await analyzeDocumentApi({
	fileBase64: base64Data,
	mimeType: file.type \|\| 'application/pdf',
	fileName: file.name,
	jurisdiction: selectedCity,
	});

	if (docAnalysis) {
	const extractedGrievance = `${docAnalysis.title}\n${docAnalysis.legalDiagnosis \|\| ''}\n${docAnalysis.requestScope \|\| ''}`.trim();
	setRtiText(extractedGrievance);
	// Run RTI quality audit on the extracted text
	const audit = await auditRtiApi(extractedGrievance, selectedCity);
	setAuditResult(audit);
	}
	} catch (err: any) {
	console.error('PDF extraction error in RTI auditor:', err);
	setAuditError(err?.message \|\| 'Could not extract text from document. Please copy-paste text instead.');
	} finally {
	setIsProcessingFile(false);
	setAuditing(false);
	}
	};
	reader.onerror = () => {
	setIsProcessingFile(false);
	setAuditError('Failed to read the uploaded document.');
	};
	reader.readAsDataURL(file);
	};

	const handleRunAudit = async (customText?: string) => {
	const text = customText !== undefined ? customText : rtiText;
	if (!text.trim()) return;

	setAuditing(true);
	setAuditError(null);
	try {
	const res = await auditRtiApi(text, selectedCity);
	setAuditResult(res);
	} catch (err: any) {
	console.error('RTI Audit error:', err);
	setAuditError(err?.message \|\| 'Failed to complete RTI audit. Please retry.');
	} finally {
	setAuditing(false);
	}
	};

	const handleCopy = (text: string) => {
	navigator.clipboard.writeText(text);
	setCopiedDraft(true);
	setTimeout(() => setCopiedDraft(false), 2500);
	};

	return (
	<div
	onClick={(e) => {
	if (e.target === e.currentTarget) {
	onClose();
	}
	}}
	className="fixed inset-0 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200 cursor-pointer"
	>
	<div
	onClick={(e) => e.stopPropagation()}
	className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl border border-[#CBD5E1] overflow-hidden cursor-default"
	>
	{/* Header */}
	<div className="px-6 py-4 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
	<div className="flex items-center gap-3">
	<div className="w-10 h-10 rounded-xl bg-[#006c4a]/10 text-[#006c4a] flex items-center justify-center font-bold">
	<span className="material-symbols-outlined text-[24px]">verified</span>
	</div>
	<div>
	<div className="flex items-center gap-2">
	<h2 className="font-headline font-bold text-[18px] sm:text-[20px] text-[#0F172A]">
	RTI Strength & Quality Auditor
	</h2>
	<span className="text-[11px] font-bold text-[#166534] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full border border-[#BBF7D0]">
	RTI Act 2005 Compliance
	</span>
	</div>
	<p className="text-[12.5px] text-[#64748B]">
	Audit draft questions or upload rejection letters/PDFs to get a reject-proof statutory RTI draft
	</p>
	</div>
	</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>

	{/* Body */}
	<div className="p-6 overflow-y-auto flex-grow flex flex-col gap-6">
	{/* Input & PDF Upload Section */}
	<div className="flex flex-col gap-3">
	{/* PDF Upload Banner */}
	<div className="p-3.5 bg-[#F8FAFC] border border-dashed border-[#CBD5E1] rounded-xl flex flex-col sm:flex-row items-center justify-between gap-3">
	<div className="flex items-center gap-3">
	<div className="w-10 h-10 rounded-lg bg-white border border-[#CBD5E1] flex items-center justify-center text-[#006c4a] shadow-xs shrink-0">
	<span className="material-symbols-outlined text-[22px]">upload_file</span>
	</div>
	<div>
	<p className="text-[13px] font-bold text-[#0F172A]">
	{uploadedFileName ? `Loaded: ${uploadedFileName}` : 'Have an RTI Draft or Govt Rejection Order in PDF?'}
	</p>
	<p className="text-[11.5px] text-[#64748B]">
	{uploadedFileName
	? 'Document extracted. Audit results generated below.'
	: 'Upload PIO reply, Section 8 rejection letter, or application draft (PDF / Image)'}
	</p>
	</div>
	</div>

	<div className="flex items-center gap-2 shrink-0">
	<input
	type="file"
	ref={fileInputRef}
	onChange={handleFileUpload}
	accept=".pdf,.png,.jpg,.jpeg,.txt,.doc,.docx"
	className="hidden"
	/>
	<button
	type="button"
	onClick={() => fileInputRef.current?.click()}
	disabled={isProcessingFile \|\| auditing}
	className="bg-white hover:bg-[#F1F5F9] text-[#0F172A] border border-[#CBD5E1] font-semibold text-[12.5px] px-3.5 py-2 rounded-lg transition-colors cursor-pointer flex items-center gap-1.5 shadow-xs"
	>
	<span className="material-symbols-outlined text-[16px]">
	{isProcessingFile ? 'sync' : 'attach_file'}
	</span>
	<span>{uploadedFileName ? 'Upload Different PDF' : 'Upload PDF / Doc'}</span>
	</button>
	</div>
	</div>

	<div className="flex items-center justify-between">
	<label className="text-[13px] font-bold text-[#0F172A]">
	Or Type / Paste Your RTI Questions:
	</label>
	<div className="flex items-center gap-1.5 text-[12px] text-[#64748B]">
	<span>Try sample:</span>
	{SAMPLE_RTI_DRAFTS.map((sample, idx) => (
	<button
	key={idx}
	onClick={() => {
	setRtiText(sample.text);
	handleRunAudit(sample.text);
	}}
	className="text-[#006c4a] hover:underline font-semibold cursor-pointer"
	>
	#{idx + 1}
	</button>
	))}
	</div>
	</div>

	<textarea
	value={rtiText}
	onChange={(e) => setRtiText(e.target.value)}
	rows={4}
	placeholder="Paste or type what information you want from the government body..."
	className="w-full p-3.5 rounded-xl border border-[#CBD5E1] focus:border-[#006c4a] focus:ring-2 focus:ring-[#006c4a]/15 text-[14px] text-[#0F172A] outline-none shadow-inner"
	/>

	<div className="flex items-center justify-between pt-1">
	<span className="text-[12px] text-[#64748B]">
	Jurisdiction: <strong className="text-[#0F172A]">{selectedCity}</strong>
	</span>
	<button
	onClick={() => handleRunAudit()}
	disabled={auditing \|\| isProcessingFile \|\| !rtiText.trim()}
	className="bg-[#006c4a] hover:bg-[#005137] text-white font-bold text-[13.5px] px-6 py-2.5 rounded-xl flex items-center gap-2 transition-all cursor-pointer shadow-sm disabled:opacity-60"
	>
	{auditing ? (
	<>
	<span className="material-symbols-outlined text-[18px] animate-spin">sync</span>
	<span>Auditing RTI Quality...</span>
	</>
	) : (
	<>
	<span className="material-symbols-outlined text-[18px]">verified_user</span>
	<span>Audit RTI Strength Score</span>
	</>
	)}
	</button>
	</div>
	</div>

	{auditError && (
	<div className="bg-[#FEF2F2] border border-[#FECACA] p-3.5 rounded-xl text-[#991B1B] text-[13px] flex items-center gap-2">
	<span className="material-symbols-outlined text-[18px]">error</span>
	<span>{auditError}</span>
	</div>
	)}

	{/* Audit Results Dashboard */}
	{auditResult && (
	<div className="flex flex-col gap-5 animate-in fade-in duration-200 border-t border-[#E2E8F0] pt-5">
	{/* Score & Verdict Banner */}
	<div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-2xl p-5">
	{/* Score Dial */}
	<div className="md:col-span-1 flex flex-col items-center justify-center text-center p-3 bg-white rounded-xl border border-[#E2E8F0] shadow-xs">
	<span className="text-[11px] font-bold uppercase tracking-wider text-[#64748B] mb-1">
	RTI Strength Score
	</span>
	<div className="text-[42px] font-bold font-headline text-[#006c4a] leading-none">
	{auditResult.score}
	<span className="text-[20px] text-[#64748B]">/100</span>
	</div>
	<span
	className={`mt-2 text-[12px] font-bold px-2.5 py-0.5 rounded-full ${
	auditResult.score >= 85
	? 'bg-[#DCFCE7] text-[#166534]'
	: auditResult.score >= 70
	? 'bg-[#FEF3C7] text-[#92400E]'
	: 'bg-[#FEE2E2] text-[#991B1B]'
	}`}
	>
	{auditResult.grade}
	</span>
	</div>

	{/* Verdict Summary */}
	<div className="md:col-span-3 flex flex-col justify-center gap-2">
	<div className="flex items-center justify-between">
	<h3 className="font-headline font-bold text-[16px] text-[#0F172A]">
	Statutory Audit Verdict
	</h3>
	<span className="text-[12px] font-bold text-[#166534] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full border border-[#BBF7D0]">
	Est. Success Rate: {auditResult.estimatedSuccessRate \|\| 92}%
	</span>
	</div>
	<p className="text-[13.5px] text-[#334155] leading-relaxed">
	{auditResult.verdictSummary}
	</p>
	{auditResult.exemptionsRiskAnalysis && (
	<p className="text-[12px] text-[#64748B] bg-white p-2.5 rounded-lg border border-[#E2E8F0]">
	<strong className="text-[#0F172A]">Exemption Risk: </strong>
	{auditResult.exemptionsRiskAnalysis}
	</p>
	)}
	</div>
	</div>

	{/* 7-Point Compliance Checklist */}
	<div>
	<h4 className="font-headline font-bold text-[15px] text-[#0F172A] mb-3 flex items-center gap-1.5">
	<span className="material-symbols-outlined text-[18px] text-[#006c4a]">checklist</span>
	<span>7-Point Statutory Compliance Checklist</span>
	</h4>

	<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
	{auditResult.checklist.map((item, idx) => (
	<div
	key={idx}
	className={`p-3 rounded-xl border flex flex-col gap-1 text-[12.5px] ${
	item.status === 'pass'
	? 'bg-[#F0FDF4] border-[#86EFAC]'
	: item.status === 'warning'
	? 'bg-[#FFFBEB] border-[#FDE68A]'
	: 'bg-[#FEF2F2] border-[#FECACA]'
	}`}
	>
	<div className="flex items-center justify-between">
	<span className="font-bold text-[#0F172A] flex items-center gap-1.5">
	<span
	className={`material-symbols-outlined text-[16px] ${
	item.status === 'pass'
	? 'text-[#166534]'
	: item.status === 'warning'
	? 'text-[#D97706]'
	: 'text-[#DC2626]'
	}`}
	>
	{item.status === 'pass'
	? 'check_circle'
	: item.status === 'warning'
	? 'warning'
	: 'cancel'}
	</span>
	{item.item}
	</span>
	<span className="text-[11px] font-semibold text-[#475569] bg-white px-2 py-0.5 rounded border border-[#CBD5E1]">
	{item.rule}
	</span>
	</div>
	<p className="text-[#334155] mt-0.5">{item.finding}</p>
	{item.statutoryFix && item.status !== 'pass' && (
	<p className="text-[11.5px] text-[#92400E] font-medium mt-0.5">
	<strong>Fix: </strong> {item.statutoryFix}
	</p>
	)}
	</div>
	))}
	</div>
	</div>

	{/* Optimized Ready-to-Submit RTI Draft */}
	{auditResult.optimizedRtiDraft && (
	<div className="bg-white border-2 border-[#006c4a] rounded-2xl p-5 shadow-md flex flex-col gap-3">
	<div className="flex flex-wrap items-center justify-between gap-2 border-b border-[#E2E8F0] pb-3">
	<div className="flex items-center gap-2">
	<span className="material-symbols-outlined text-[#006c4a] text-[22px]">
	auto_awesome
	</span>
	<h4 className="font-headline font-bold text-[16px] text-[#0F172A]">
	Optimized & Bulletproof RTI Application
	</h4>
	</div>

	<div className="flex items-center gap-2">
	<button
	onClick={() => handleCopy(auditResult.optimizedRtiDraft)}
	className="bg-[#F1F5F9] hover:bg-[#E2E8F0] text-[#0F172A] font-semibold text-[12.5px] px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors cursor-pointer border border-[#CBD5E1]"
	>
	<span className="material-symbols-outlined text-[15px]">
	{copiedDraft ? 'check' : 'content_copy'}
	</span>
	<span>{copiedDraft ? 'Copied' : 'Copy Application'}</span>
	</button>

	{onLaunchRtiCase && (
	<button
	onClick={() => {
	onLaunchRtiCase(
	auditResult.optimizedRtiDraft,
	`RTI: ${rtiText.slice(0, 40)}...`
	);
	onClose();
	}}
	className="bg-[#006c4a] hover:bg-[#005137] text-white font-bold text-[12.5px] px-4 py-1.5 rounded-lg flex items-center gap-1 transition-all cursor-pointer shadow-xs hover:scale-[1.02]"
	>
	<span>Open in Workspace</span>
	<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
	</button>
	)}
	</div>
	</div>

	<pre className="font-mono text-[12.5px] bg-[#F8FAFC] p-4 rounded-xl border border-[#E2E8F0] text-[#0F172A] whitespace-pre-wrap max-h-72 overflow-y-auto leading-relaxed">
	{auditResult.optimizedRtiDraft}
	</pre>
	</div>
	)}
	</div>
	)}
	</div>

	{/* Footer */}
	<div className="px-6 py-3.5 border-t border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
	<span className="text-[12px] text-[#64748B]">
	Section 6(1) Right to Information Act 2005
	</span>
	<button
	onClick={onClose}
	className="bg-[#0F172A] hover:bg-[#1E293B] text-white font-semibold text-[13px] px-5 py-2 rounded-xl transition-colors cursor-pointer"
	>
	Close
	</button>
	</div>
	</div>
	</div>
	);
	};