import React, { useState } from 'react';
import { LegalCase, ExtractedFact } from '../types';
import { DECODED_RESPONSES } from '../data/mockData';
import {
  generateFilingDraftApi,
  stressTestApi,
  interpretResponseApi,
  searchOfficerApi,
  AIStressTestResponse,
  AIDecodedResponse,
  AuthoritySearchResult,
} from '../services/api';

interface FilingWorkspaceProps {
  currentCase: LegalCase;
  onUpdateCase: (updatedCase: LegalCase) => void;
  onNavigate: (view: 'home' | 'workspace' | 'my-filings') => void;
  onDownloadPDF: (legalCase: LegalCase) => void;
}

export const FilingWorkspace: React.FC<FilingWorkspaceProps> = ({
  currentCase,
  onUpdateCase,
  onNavigate,
  onDownloadPDF,
}) => {
  // Step Tabs: 1 to 6
  const [activeStep, setActiveStep] = useState<number>(4);
  const [copiedDraft, setCopiedDraft] = useState(false);

  // AI draft state
  const [generatingDraft, setGeneratingDraft] = useState(false);
  const [draftNoticeText, setDraftNoticeText] = useState<string>(
    currentCase.formalLetter ||
      (currentCase.description?.includes('To:') || currentCase.description?.includes('NOTICE')
        ? currentCase.description
        : `LEGAL NOTICE & STATUTORY DEMAND
Pursuant to ${currentCase.statute || 'Statutory Code of Procedure'}

To:
${currentCase.officer?.name || 'Public Information Officer / Authorized Officer'}
${currentCase.officer?.title || 'Designated Public Officer'}
${currentCase.officer?.department || 'Grievance Redressal Division'}
${currentCase.officer?.address || `${currentCase.officer?.jurisdiction || 'Local'} Administrative Complex`}
Email: ${currentCase.officer?.email || 'records.intake@civic-gateway.gov'}

Date: ${currentCase.filedDate || new Intl.DateTimeFormat('en-IN', { month: 'long', day: 'numeric', year: 'numeric' }).format(new Date())}
Case Reference: ${currentCase.caseNumber}

SUBJECT: STATUTORY DEMAND NOTICE IN THE MATTER OF: ${currentCase.title.toUpperCase()}

Sir / Madam,

Under instructions from and on behalf of the Requester, this formal statutory notice is served upon you regarding the following matter:

1. STATEMENT OF MATERIAL FACTS:
${(currentCase.facts || []).map((f, i) => `(${String.fromCharCode(97 + i)}) ${f.label}: ${f.value}`).join('\n') || `(a) Core Matter: ${currentCase.rawIntakeText || currentCase.description}`}

2. STATUTORY GROUNDS & APPLICABLE LAWS:
(a) The failure to address this matter violates the mandatory provisions of ${currentCase.statute}.
(b) You are statutorily required to resolve the grievance, furnish certified records, and ensure complete compliance without arbitrary delay.

3. SPECIFIC DEMANDS & REMEDIES:
(i) ${currentCase.requestScope || 'Take immediate remedial action and resolve the grievance in full.'}
(ii) Provide complete written reasons and certified copies of file notesheets concerning the action taken.
(iii) Respond within the mandatory statutory period of ${currentCase.daysRemaining || 30} days from receipt.

4. NOTICE OF LEGAL ACTION & COST LIABILITY:
Take notice that in default of compliance within the stipulated period, the Requester shall initiate appropriate appellate and judicial proceedings before the competent Forum / Commission / Court, holding you liable for all costs and statutory interest.

Yours faithfully,
${currentCase.autoRedactEnabled ? '[REDACTED_REQUESTER]' : 'Authorized Requester'}`)
  );

  // Custom Prompt for re-drafting
  const [customDraftPrompt, setCustomDraftPrompt] = useState('');

  // Stress test state
  const [stressTesting, setStressTesting] = useState(false);
  const [stressResult, setStressResult] = useState<AIStressTestResponse | null>(
    currentCase.vulnerabilities
      ? {
          score: currentCase.score || 88,
          grade: (currentCase.score || 88) >= 90 ? 'A+' : 'A',
          vulnerabilities: (currentCase.vulnerabilities || []).map((v) => ({
            title: 'Potential Opposition Maneuver',
            description: v,
            impact: 'medium',
            fixAvailable: true,
            fixActionText: 'Apply Statutory Counter-Clause',
          })),
          strengths: [
            `Clear statutory basis established under ${currentCase.statute}`,
            'Structured chronological statement of facts',
            'Specific demand and compliance timeline served',
          ],
          recommendedFixes: currentCase.recommendedFixes || [],
          appellateStrategy: currentCase.appellateStrategy || 'First Appeal before First Appellate Authority / Consumer Commission',
        }
      : null
  );

  // Agency Response Decoder state
  const [customAgencyText, setCustomAgencyText] = useState('');
  const [decodingResponse, setDecodingResponse] = useState(false);
  const [decodedResult, setDecodedResult] = useState<AIDecodedResponse | null>(null);
  const [selectedPresetIndex] = useState<number>(0);

  // Facts state
  const [showAddFact, setShowAddFact] = useState(false);
  const [newFactLabel, setNewFactLabel] = useState('');
  const [newFactValue, setNewFactValue] = useState('');

  // Officer Directory Search state
  const [searchQuery, setSearchQuery] = useState('');
  const [searchingOfficer, setSearchingOfficer] = useState(false);
  const [searchResult, setSearchResult] = useState<AuthoritySearchResult | null>(null);
  const [searchError, setSearchError] = useState<string | null>(null);

  // Generate / Re-draft AI Notice
  const handleGenerateAIDraft = async (specialInstruction?: string) => {
    setGeneratingDraft(true);
    try {
      const instructions = specialInstruction || customDraftPrompt || undefined;
      const res = await generateFilingDraftApi(currentCase, instructions);
      if (res.formalLetter) {
        setDraftNoticeText(res.formalLetter);
        onUpdateCase({
          ...currentCase,
          formalLetter: res.formalLetter,
          description: res.formalLetter,
          statutoryClauses: res.statutoryClauses,
          recommendedExhibits: res.recommendedExhibits,
        });
      }
    } catch (err) {
      console.error('Failed to generate AI draft:', err);
    } finally {
      setGeneratingDraft(false);
    }
  };

  // Run AI Stress Test
  const handleRunStressTest = async () => {
    setStressTesting(true);
    try {
      const res = await stressTestApi(currentCase);
      setStressResult(res);
      if (res.score) {
        onUpdateCase({
          ...currentCase,
          score: res.score,
          vulnerabilities: res.vulnerabilities?.map((v) => v.description),
          recommendedFixes: res.recommendedFixes,
          appellateStrategy: res.appellateStrategy,
        });
      }
    } catch (err) {
      console.error('Failed to run AI stress test:', err);
    } finally {
      setStressTesting(false);
    }
  };

  // Search Live Authority Directory
  const handleSearchDirectory = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!searchQuery.trim()) return;

    setSearchingOfficer(true);
    setSearchError(null);
    try {
      const res = await searchOfficerApi(
        searchQuery.trim(),
        currentCase.officer?.jurisdiction || 'Bengaluru'
      );
      setSearchResult(res);
    } catch (err: any) {
      console.error('Directory search error:', err);
      setSearchError('Could not find contacts for this department. Please refine your search.');
    } finally {
      setSearchingOfficer(false);
    }
  };

  // Apply Discovered Authority Contacts to Case
  const handleApplyDiscoveredOfficer = () => {
    if (!searchResult) return;

    const updatedOfficer = {
      ...currentCase.officer,
      name: searchResult.officerTitle.split('&')[0]?.trim() || currentCase.officer?.name || 'Designated Public Officer',
      title: searchResult.officerTitle,
      department: searchResult.department,
      email: searchResult.nodalEmail,
      address: searchResult.officeAddress,
      portalUrl: searchResult.grievancePortal,
    };

    const updatedCase = {
      ...currentCase,
      officer: updatedOfficer,
      statute: searchResult.statute || currentCase.statute,
    };

    onUpdateCase(updatedCase);

    // Also update draft notice recipient header if possible
    const updatedDraft = draftNoticeText.replace(
      /To:[\s\S]*?Date:/i,
      `To:\n${updatedOfficer.name}\n${updatedOfficer.title}, ${updatedOfficer.department}\n${updatedOfficer.address}\nEmail: ${updatedOfficer.email}\n\nDate:`
    );
    setDraftNoticeText(updatedDraft);
  };

  // Decode Agency Response
  const handleDecodeResponse = async () => {
    const textToDecode = customAgencyText.trim() || DECODED_RESPONSES[selectedPresetIndex]?.departmentStatement || '';
    if (!textToDecode) return;

    setDecodingResponse(true);
    try {
      const res = await interpretResponseApi(textToDecode, currentCase.category);
      setDecodedResult(res);
    } catch (err) {
      console.error('Failed to decode response:', err);
    } finally {
      setDecodingResponse(false);
    }
  };

  // Copy Draft Notice
  const handleCopyDraft = () => {
    navigator.clipboard.writeText(draftNoticeText);
    setCopiedDraft(true);
    setTimeout(() => setCopiedDraft(false), 2500);
  };

  // Toggle PII mask
  const togglePiiMask = (id: string) => {
    const updated = (currentCase.piiItems || []).map((item) =>
      item.id === id ? { ...item, masked: !item.masked } : item
    );
    onUpdateCase({ ...currentCase, piiItems: updated });
  };

  // Toggle Hardship clause
  const toggleHardshipClause = () => {
    const nextVal = !currentCase.hasHardshipClause;
    const newScore = nextVal ? Math.min(98, (currentCase.score || 84) + 12) : Math.max(70, (currentCase.score || 84) - 12);
    onUpdateCase({
      ...currentCase,
      hasHardshipClause: nextVal,
      score: newScore,
    });
  };

  // Add Fact
  const handleAddFact = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newFactLabel.trim() || !newFactValue.trim()) return;

    const newFact: ExtractedFact = {
      id: `fact-${Date.now()}`,
      label: newFactLabel.trim(),
      value: newFactValue.trim(),
    };

    onUpdateCase({
      ...currentCase,
      facts: [...(currentCase.facts || []), newFact],
    });

    setNewFactLabel('');
    setNewFactValue('');
    setShowAddFact(false);
  };

  // Remove Fact
  const handleRemoveFact = (id: string) => {
    onUpdateCase({
      ...currentCase,
      facts: (currentCase.facts || []).filter((f) => f.id !== id),
    });
  };

  // Step definition
  const STEPS = [
    { num: 1, label: 'Hide Private Info', icon: 'shield' },
    { num: 2, label: 'Who to Send It To', icon: 'account_box' },
    { num: 3, label: 'What Happened', icon: 'fact_check' },
    { num: 4, label: 'Official Letter', icon: 'edit_document' },
    { num: 5, label: 'Check Weak Points', icon: 'health_and_safety' },
    { num: 6, label: 'Translate Official Reply', icon: 'translate' },
  ];

  return (
    <div className="w-full flex-grow max-w-[1280px] mx-auto px-4 sm:px-8 md:px-10 py-6 flex flex-col gap-6">
      {/* Top Breadcrumb & Status Header */}
      <div className="bg-white border border-[#CBD5E1] rounded-2xl p-5 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex flex-col gap-1.5">
          <div className="flex items-center gap-2 text-[12.5px] text-[#64748B]">
            <button
              onClick={() => onNavigate('home')}
              className="hover:text-[#006c4a] flex items-center gap-1 cursor-pointer font-medium"
            >
              <span className="material-symbols-outlined text-[15px]">arrow_back</span>
              <span>Home</span>
            </button>
            <span>/</span>
            <button
              onClick={() => onNavigate('my-filings')}
              className="hover:text-[#006c4a] cursor-pointer font-medium"
            >
              My Filings
            </button>
            <span>/</span>
            <span className="text-[#0F172A] font-bold font-mono">{currentCase.caseNumber}</span>
          </div>

          <div className="flex flex-wrap items-center gap-2.5 mt-0.5">
            <h1 className="font-headline text-[22px] sm:text-[24px] font-bold text-[#0F172A]">
              {currentCase.title}
            </h1>
            <span className="bg-[#DCFCE7] text-[#166534] border border-[#BBF7D0] text-[11.5px] font-bold px-2.5 py-0.5 rounded-full uppercase tracking-wider">
              {currentCase.category}
            </span>
          </div>

          <div className="flex flex-wrap items-center gap-3 text-[13px] text-[#475569]">
            <span className="flex items-center gap-1">
              <span className="material-symbols-outlined text-[16px] text-[#006c4a]">account_balance</span>
              <span>Law: {currentCase.statute}</span>
            </span>
            <span>•</span>
            <span className="flex items-center gap-1">
              <span className="material-symbols-outlined text-[16px] text-[#006c4a]">location_on</span>
              <span>{currentCase.officer?.jurisdiction || 'Local Jurisdiction'}</span>
            </span>
            <span>•</span>
            <span className="flex items-center gap-1 text-[#92400E] font-medium bg-[#FEF3C7] px-2 py-0.5 rounded">
              <span className="material-symbols-outlined text-[14px]">timer</span>
              <span>{currentCase.daysRemaining || 30} Days to Reply</span>
            </span>
          </div>
        </div>

        {/* Action Controls */}
        <div className="flex flex-wrap items-center gap-2.5">
          <div className="flex items-center gap-1.5 px-3 py-1.5 bg-[#F0FDF4] border border-[#86EFAC] rounded-xl text-[12.5px] font-bold text-[#166534]">
            <span className="material-symbols-outlined text-[16px]">health_and_safety</span>
            <span>Strength: {currentCase.score || 88}%</span>
          </div>

          <button
            onClick={() => onDownloadPDF({ ...currentCase, formalLetter: draftNoticeText, description: draftNoticeText })}
            className="bg-[#0F172A] hover:bg-[#1E293B] text-white px-4 py-2 rounded-xl text-[13px] font-semibold flex items-center gap-1.5 cursor-pointer shadow-xs transition-colors"
          >
            <span className="material-symbols-outlined text-[16px]">picture_as_pdf</span>
            <span>Download PDF</span>
          </button>
        </div>
      </div>

      {/* Step Tabs Navigation Bar */}
      <div className="bg-white border border-[#CBD5E1] rounded-2xl p-2 shadow-sm flex overflow-x-auto no-scrollbar gap-1.5">
        {STEPS.map((step) => {
          const isActive = activeStep === step.num;
          return (
            <button
              key={step.num}
              onClick={() => setActiveStep(step.num)}
              className={`flex-1 min-w-[130px] py-3 px-3 rounded-xl flex items-center justify-center gap-2 text-[13px] font-semibold transition-all cursor-pointer ${
                isActive
                  ? 'bg-[#006c4a] text-white shadow-sm'
                  : 'bg-transparent text-[#475569] hover:bg-[#F1F5F9] hover:text-[#0F172A]'
              }`}
            >
              <span className="material-symbols-outlined text-[18px]">{step.icon}</span>
              <span className="whitespace-nowrap">{step.label}</span>
            </button>
          );
        })}
      </div>

      {/* STEP 1: HIDE PRIVATE INFO */}
      {activeStep === 1 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">shield</span>
                <span>Hide Private Information</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                Automatically masks your phone number, bank details, and personal address to keep your filing secure.
              </p>
            </div>
            <div className="flex items-center gap-2">
              <span className="bg-[#DCFCE7] text-[#166534] text-[12px] font-bold px-3 py-1 rounded-full border border-[#BBF7D0]">
                {(currentCase.piiItems || []).filter((p) => p.masked).length} of {(currentCase.piiItems || []).length} Hidden
              </span>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="flex flex-col gap-3">
              <span className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider">
                Private details detected:
              </span>
              <div className="flex flex-col gap-2.5">
                {(currentCase.piiItems || []).length === 0 ? (
                  <div className="p-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl text-[13.5px] text-[#64748B]">
                    No sensitive financial or personal identity details detected in this filing.
                  </div>
                ) : (
                  (currentCase.piiItems || []).map((item) => (
                    <div
                      key={item.id}
                      className="p-3 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex items-center justify-between"
                    >
                      <div>
                        <span className="text-[11px] font-bold uppercase text-[#64748B] bg-white px-2 py-0.5 rounded border border-[#CBD5E1]">
                          {item.type}
                        </span>
                        <p className="text-[14px] font-medium text-[#0F172A] mt-1">{item.original}</p>
                      </div>
                      <button
                        onClick={() => togglePiiMask(item.id)}
                        className={`text-[12px] font-semibold px-3 py-1.5 rounded-lg cursor-pointer transition-colors ${
                          item.masked
                            ? 'bg-[#DCFCE7] text-[#166534] border border-[#BBF7D0]'
                            : 'bg-[#FEE2E2] text-[#991B1B] border border-[#FECACA]'
                        }`}
                      >
                        {item.masked ? '🔒 Hidden' : '👁️ Visible'}
                      </button>
                    </div>
                  ))
                )}
              </div>
            </div>

            <div className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl p-4 flex flex-col gap-3">
              <span className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider">
                Protected Text Preview:
              </span>
              <p className="text-[14px] text-[#334155] leading-relaxed bg-white p-4 rounded-lg border border-[#E2E8F0]">
                {currentCase.redactedText || currentCase.rawIntakeText || currentCase.description}
              </p>
              <div className="p-3 bg-[#EFF6FF] border border-[#BFDBFE] rounded-lg text-[12.5px] text-[#1E40AF] flex items-center gap-2">
                <span className="material-symbols-outlined text-[18px]">info</span>
                <span>Protected tokens (e.g. [REDACTED_REQUESTER]) ensure your private data is shielded when notices are served.</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* STEP 2: WHO TO SEND IT TO */}
      {activeStep === 2 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">account_box</span>
                <span>Who to Send It To</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                Real, designated public authority, grievance nodal officer, or corporate legal cell in {currentCase.officer?.jurisdiction || 'your city'}.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Primary Officer Card */}
            <div className="p-5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex flex-col gap-4">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-[#006c4a] text-white font-bold flex items-center justify-center text-[16px] shadow-xs">
                  {currentCase.officer?.avatar || 'PO'}
                </div>
                <div>
                  <h3 className="font-headline font-bold text-[17px] text-[#0F172A]">
                    {currentCase.officer?.name || 'Public Information Officer'}
                  </h3>
                  <p className="text-[13px] text-[#006c4a] font-semibold">{currentCase.officer?.title || 'Designated Nodal Officer'}</p>
                </div>
              </div>

              <div className="flex flex-col gap-2.5 pt-3 border-t border-[#E2E8F0] text-[13.5px]">
                <div className="flex justify-between items-start gap-2">
                  <span className="text-[#64748B] whitespace-nowrap">Department:</span>
                  <span className="font-semibold text-[#0F172A] text-right">{currentCase.officer?.department || 'Civic Grievance Redressal Division'}</span>
                </div>
                <div className="flex justify-between items-start gap-2">
                  <span className="text-[#64748B] whitespace-nowrap">Jurisdiction / Area:</span>
                  <span className="font-semibold text-[#0F172A] text-right">{currentCase.officer?.jurisdiction || 'Local Office'}</span>
                </div>
                <div className="flex justify-between items-start gap-2">
                  <span className="text-[#64748B] whitespace-nowrap">Official Email:</span>
                  <span className="font-semibold text-[#0F172A] text-right font-mono text-[12.5px]">{currentCase.officer?.email || 'records.intake@civic-gateway.gov'}</span>
                </div>
                {currentCase.officer?.address && (
                  <div className="flex justify-between items-start gap-2">
                    <span className="text-[#64748B] whitespace-nowrap">Office Address:</span>
                    <span className="font-medium text-[#334155] text-right text-[12.5px]">{currentCase.officer.address}</span>
                  </div>
                )}
                {currentCase.officer?.portalUrl && (
                  <div className="flex justify-between items-start gap-2">
                    <span className="text-[#64748B] whitespace-nowrap">Online Portal:</span>
                    <a
                      href={currentCase.officer.portalUrl.startsWith('http') ? currentCase.officer.portalUrl : `https://${currentCase.officer.portalUrl}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-[#006c4a] hover:underline font-semibold text-right text-[12.5px] flex items-center gap-1"
                    >
                      <span>{currentCase.officer.portalUrl}</span>
                      <span className="material-symbols-outlined text-[13px]">open_in_new</span>
                    </a>
                  </div>
                )}
              </div>

              <div className="mt-2 p-3 bg-[#DCFCE7] border border-[#BBF7D0] rounded-lg text-[12.5px] text-[#166534] flex items-center gap-2">
                <span className="material-symbols-outlined text-[18px]">verified</span>
                <span>Designated officer & legal timeline ({currentCase.daysRemaining || 30} days) active for this statutory filing.</span>
              </div>
            </div>

            {/* Live Indian Authority Directory Search */}
            <div className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl p-5 flex flex-col gap-4">
              <div>
                <span className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider flex items-center gap-1.5">
                  <span className="material-symbols-outlined text-[#006c4a] text-[18px]">search</span>
                  <span>Search Real Department Directory</span>
                </span>
                <p className="text-[12.5px] text-[#64748B] mt-0.5">
                  Look up real public authorities, consumer forums, police nodal cells, or municipal offices in {currentCase.officer?.jurisdiction || 'your city'}.
                </p>
              </div>

              <form onSubmit={handleSearchDirectory} className="flex gap-2">
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="e.g. BBMP Solid Waste, Consumer Forum, BESCOM, Police PIO"
                  className="flex-1 bg-white border border-[#CBD5E1] rounded-xl px-3 py-2 text-[13px] text-[#0F172A] outline-none focus:border-[#006c4a]"
                />
                <button
                  type="submit"
                  disabled={searchingOfficer || !searchQuery.trim()}
                  className="bg-[#006c4a] hover:bg-[#005137] text-white px-3.5 py-2 rounded-xl text-[12.5px] font-semibold cursor-pointer disabled:opacity-50 flex items-center gap-1"
                >
                  <span className="material-symbols-outlined text-[16px]">
                    {searchingOfficer ? 'sync' : 'search'}
                  </span>
                  <span>{searchingOfficer ? 'Finding...' : 'Search'}</span>
                </button>
              </form>

              {searchError && (
                <div className="p-3 bg-[#FEF2F2] border border-[#FECACA] rounded-lg text-[12.5px] text-[#991B1B]">
                  {searchError}
                </div>
              )}

              {searchResult && (
                <div className="p-4 bg-white border border-[#CBD5E1] rounded-xl flex flex-col gap-2.5 text-[13px]">
                  <div className="flex justify-between items-start">
                    <span className="font-bold text-[#0F172A]">{searchResult.department}</span>
                    <span className="bg-[#E0F2FE] text-[#0369A1] font-bold text-[11px] px-2 py-0.5 rounded">
                      Verified
                    </span>
                  </div>
                  <p className="text-[12.5px] text-[#006c4a] font-medium">{searchResult.officerTitle}</p>
                  <p className="text-[12px] text-[#475569]">
                    <span className="font-semibold">Email:</span> <span className="font-mono">{searchResult.nodalEmail}</span>
                  </p>
                  <p className="text-[12px] text-[#475569]">
                    <span className="font-semibold">Address:</span> {searchResult.officeAddress}
                  </p>
                  {searchResult.grievancePortal && (
                    <p className="text-[12px] text-[#475569]">
                      <span className="font-semibold">Portal:</span> {searchResult.grievancePortal}
                    </p>
                  )}
                  <button
                    onClick={handleApplyDiscoveredOfficer}
                    className="mt-1 w-full bg-[#0F172A] hover:bg-[#1E293B] text-white py-1.5 rounded-lg text-[12px] font-semibold flex items-center justify-center gap-1 cursor-pointer transition-colors"
                  >
                    <span className="material-symbols-outlined text-[15px]">check_circle</span>
                    <span>Use This Authority for My Notice</span>
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* STEP 3: WHAT HAPPENED */}
      {activeStep === 3 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">fact_check</span>
                <span>What Happened (Chronological Facts)</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                Gemini synthesized your narrative into legally structured, chronological facts. You can edit or add points.
              </p>
            </div>
            <button
              onClick={() => setShowAddFact(true)}
              className="bg-[#006c4a] hover:bg-[#005137] text-white text-[12.5px] font-semibold px-3.5 py-2 rounded-xl flex items-center gap-1.5 cursor-pointer shadow-xs transition-colors"
            >
              <span className="material-symbols-outlined text-[16px]">add</span>
              <span>Add Detail</span>
            </button>
          </div>

          {/* Add Fact Form */}
          {showAddFact && (
            <form onSubmit={handleAddFact} className="p-4 bg-[#F1F5F9] border border-[#CBD5E1] rounded-xl flex flex-col gap-3">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="block text-[12px] font-semibold text-[#475569] mb-1">Fact Category</label>
                  <input
                    type="text"
                    value={newFactLabel}
                    onChange={(e) => setNewFactLabel(e.target.value)}
                    placeholder="e.g. Transaction Ref / Incident Date / Disputed Amount"
                    className="w-full bg-white border border-[#CBD5E1] rounded-lg px-3 py-2 text-[13px] text-[#0F172A] outline-none focus:border-[#006c4a]"
                    required
                  />
                </div>
                <div>
                  <label className="block text-[12px] font-semibold text-[#475569] mb-1">Fact Description</label>
                  <input
                    type="text"
                    value={newFactValue}
                    onChange={(e) => setNewFactValue(e.target.value)}
                    placeholder="e.g. ₹1,40,000 security deposit withheld despite clean exit handover on Jan 15"
                    className="w-full bg-white border border-[#CBD5E1] rounded-lg px-3 py-2 text-[13px] text-[#0F172A] outline-none focus:border-[#006c4a]"
                    required
                  />
                </div>
              </div>
              <div className="flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setShowAddFact(false)}
                  className="px-3 py-1.5 text-[12px] text-[#64748B] hover:text-[#0F172A] cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="bg-[#0F172A] hover:bg-[#1E293B] text-white px-4 py-1.5 rounded-lg text-[12px] font-semibold cursor-pointer"
                >
                  Save Point
                </button>
              </div>
            </form>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {(currentCase.facts || []).map((fact) => (
              <div
                key={fact.id}
                className="p-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex items-start justify-between gap-3"
              >
                <div>
                  <span className="text-[11px] font-bold uppercase tracking-wider text-[#006c4a] bg-[#DCFCE7] px-2 py-0.5 rounded">
                    {fact.label}
                  </span>
                  <p className="text-[14px] font-medium text-[#0F172A] mt-1.5 leading-relaxed">{fact.value}</p>
                </div>
                <button
                  onClick={() => handleRemoveFact(fact.id)}
                  className="text-[#94A3B8] hover:text-[#DC2626] cursor-pointer p-1"
                  title="Remove detail"
                >
                  <span className="material-symbols-outlined text-[16px]">delete</span>
                </button>
              </div>
            ))}
          </div>

          <div className="mt-2 p-4 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex flex-col gap-2">
            <span className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider">
              Specific Relief / Remedy Demanded:
            </span>
            <textarea
              value={currentCase.requestScope}
              onChange={(e) => onUpdateCase({ ...currentCase, requestScope: e.target.value })}
              rows={3}
              placeholder="e.g. Immediate refund of deposit with 12% p.a. interest or certified copies of notesheets within 30 days."
              className="w-full bg-white border border-[#CBD5E1] rounded-xl p-3 text-[14px] text-[#0F172A] outline-none focus:border-[#006c4a]"
            />
          </div>
        </div>
      )}

      {/* STEP 4: OFFICIAL LETTER (READY TO SEND) */}
      {activeStep === 4 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">edit_document</span>
                <span>Official Statutory Notice Letter</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                AI-analyzed, formally drafted legal notice with statutory citations, factual chronology, and penalty clauses.
              </p>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <button
                onClick={() => handleGenerateAIDraft()}
                disabled={generatingDraft}
                className="bg-[#006c4a] hover:bg-[#005137] text-white px-3.5 py-2 rounded-xl text-[13px] font-semibold flex items-center gap-1.5 cursor-pointer shadow-xs transition-all disabled:opacity-50"
              >
                <span className="material-symbols-outlined text-[16px]">
                  {generatingDraft ? 'sync' : 'auto_fix_high'}
                </span>
                <span>{generatingDraft ? 'Drafting with Gemini...' : 'Rewrite with AI'}</span>
              </button>

              <button
                onClick={handleCopyDraft}
                className="bg-[#F1F5F9] hover:bg-[#E2E8F0] text-[#0F172A] border border-[#CBD5E1] px-3.5 py-2 rounded-xl text-[13px] font-semibold flex items-center gap-1.5 cursor-pointer shadow-xs transition-colors"
              >
                <span className="material-symbols-outlined text-[16px]">
                  {copiedDraft ? 'check' : 'content_copy'}
                </span>
                <span>{copiedDraft ? 'Copied!' : 'Copy Letter'}</span>
              </button>
            </div>
          </div>

          {/* Quick Legal Tuning & Informal-to-Formal AI Refinement */}
          <div className="flex flex-col gap-3 bg-[#F8FAFC] border border-[#E2E8F0] p-4 rounded-xl">
            <div className="flex flex-wrap gap-2 items-center">
              <span className="text-[12px] font-bold text-[#64748B] uppercase tracking-wider mr-1">Quick Legal Presets:</span>
              <button
                onClick={() => handleGenerateAIDraft('Make notice more assertive, citing specific statutory penalties and personal cost liability.')}
                disabled={generatingDraft}
                className="bg-white hover:bg-[#E2E8F0] border border-[#CBD5E1] text-[#0F172A] px-2.5 py-1 rounded-lg text-[12px] font-medium cursor-pointer transition-colors"
              >
                ⚖️ High Assertiveness & Costs
              </button>
              <button
                onClick={() => handleGenerateAIDraft('Add explicit Section 10 Severability clause and certified inspection demand.')}
                disabled={generatingDraft}
                className="bg-white hover:bg-[#E2E8F0] border border-[#CBD5E1] text-[#0F172A] px-2.5 py-1 rounded-lg text-[12px] font-medium cursor-pointer transition-colors"
              >
                📑 Section 10 Severability
              </button>
              <button
                onClick={() => handleGenerateAIDraft('Include 48-Hour Urgent Life & Liberty notice invocation.')}
                disabled={generatingDraft}
                className="bg-white hover:bg-[#E2E8F0] border border-[#CBD5E1] text-[#0F172A] px-2.5 py-1 rounded-lg text-[12px] font-medium cursor-pointer transition-colors"
              >
                ⚡ 48-Hour Urgency Clause
              </button>
            </div>

            {/* Custom Informal-to-Formal Instruction Box */}
            <div className="flex flex-col sm:flex-row gap-2 pt-2 border-t border-[#E2E8F0]">
              <input
                type="text"
                value={customDraftPrompt}
                onChange={(e) => setCustomDraftPrompt(e.target.value)}
                placeholder="Tell AI in plain words what to add or change (e.g. 'tell them I am a student, demand ₹25k mental agony compensation and 18% interest')..."
                className="flex-1 bg-white border border-[#CBD5E1] rounded-xl px-3.5 py-2 text-[13px] text-[#0F172A] outline-none focus:border-[#006c4a]"
              />
              <button
                type="button"
                onClick={() => handleGenerateAIDraft()}
                disabled={generatingDraft || !customDraftPrompt.trim()}
                className="bg-[#006c4a] hover:bg-[#005137] text-white px-4 py-2 rounded-xl text-[12.5px] font-semibold flex items-center justify-center gap-1.5 cursor-pointer disabled:opacity-50 transition-colors shrink-0"
              >
                <span className="material-symbols-outlined text-[16px]">
                  {generatingDraft ? 'sync' : 'auto_fix_high'}
                </span>
                <span>{generatingDraft ? 'Drafting...' : 'Translate to Legal Letter'}</span>
              </button>
            </div>
          </div>

          {/* Large, Clean Full-Text Notice Area */}
          <div className="flex flex-col gap-2">
            <textarea
              value={draftNoticeText}
              onChange={(e) => setDraftNoticeText(e.target.value)}
              rows={18}
              className="w-full bg-[#F8FAFC] border-2 border-[#CBD5E1] focus:border-[#006c4a] focus:bg-white rounded-xl p-4 sm:p-5 font-mono text-[13.5px] sm:text-[14px] text-[#0F172A] leading-relaxed outline-none transition-colors shadow-inner"
              placeholder="Your statutory notice text..."
            />

            <div className="flex flex-wrap items-center justify-between text-[12px] text-[#64748B] px-1 gap-2">
              <span className="flex items-center gap-1">
                <span className="material-symbols-outlined text-[15px] text-[#006c4a]">verified</span>
                <span>Ready to serve via Registered Speed Post AD, Official Email, or Portal.</span>
              </span>
              <button
                onClick={() => onDownloadPDF({ ...currentCase, formalLetter: draftNoticeText, description: draftNoticeText })}
                className="text-[#006c4a] hover:underline font-semibold flex items-center gap-1 cursor-pointer"
              >
                <span className="material-symbols-outlined text-[14px]">download</span>
                <span>Download as Official PDF</span>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* STEP 5: CHECK WEAK POINTS */}
      {activeStep === 5 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">health_and_safety</span>
                <span>Adversarial Stress Test & Weak Points Scrutiny</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                Gemini rigorously tests your filing for opposing party defenses, delay tactics, and exemption loopholes.
              </p>
            </div>

            <button
              onClick={handleRunStressTest}
              disabled={stressTesting}
              className="bg-[#006c4a] hover:bg-[#005137] text-white px-4 py-2 rounded-xl text-[13px] font-semibold flex items-center gap-1.5 cursor-pointer shadow-xs transition-all disabled:opacity-50"
            >
              <span className="material-symbols-outlined text-[16px]">
                {stressTesting ? 'sync' : 'security'}
              </span>
              <span>{stressTesting ? 'Analyzing weak points...' : 'Re-Run Stress Test'}</span>
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Vulnerabilities Detected */}
            <div className="bg-[#FEF2F2] border border-[#FCA5A5] rounded-xl p-5 flex flex-col gap-3">
              <span className="text-[13px] font-bold text-[#991B1B] uppercase tracking-wider flex items-center gap-1.5">
                <span className="material-symbols-outlined text-[18px]">warning</span>
                Opposition Defenses & Bureaucratic Excuses:
              </span>
              <ul className="flex flex-col gap-2.5 text-[13.5px] text-[#7F1D1D] list-disc list-inside">
                {stressResult?.vulnerabilities?.map((vuln, idx) => (
                  <li key={idx} className="leading-snug">
                    <span className="font-semibold">{vuln.title ? `${vuln.title}: ` : ''}</span>
                    <span>{vuln.description || (vuln as any)}</span>
                  </li>
                )) || (
                  <>
                    <li>Authority may claim that records involve third-party commercial confidence under Section 8(1)(d).</li>
                    <li>Department may claim search & duplication fees to delay disclosure.</li>
                  </>
                )}
              </ul>
            </div>

            {/* Recommended Safeguards */}
            <div className="bg-[#F0FDF4] border border-[#86EFAC] rounded-xl p-5 flex flex-col gap-3">
              <span className="text-[13px] font-bold text-[#166534] uppercase tracking-wider flex items-center gap-1.5">
                <span className="material-symbols-outlined text-[18px]">verified_user</span>
                Statutory Safeguards & Loophole Fixes:
              </span>
              <ul className="flex flex-col gap-2.5 text-[13.5px] text-[#14532D] list-disc list-inside">
                {stressResult?.recommendedFixes?.map((fix, idx) => (
                  <li key={idx} className="leading-snug">{fix}</li>
                )) || (
                  <>
                    <li>Demand certified segregation of non-exempt portions under Section 10(1).</li>
                    <li>Cite mandatory 5-day Section 6(3) departmental transfer duty.</li>
                  </>
                )}
              </ul>

              <div className="mt-2 pt-3 border-t border-[#BBF7D0] flex items-center justify-between">
                <span className="text-[12.5px] font-bold text-[#166534]">Public Interest Fee Waiver Clause</span>
                <button
                  onClick={toggleHardshipClause}
                  className={`text-[12px] font-bold px-3 py-1 rounded-lg cursor-pointer transition-colors ${
                    currentCase.hasHardshipClause
                      ? 'bg-[#166534] text-white'
                      : 'bg-white text-[#166534] border border-[#166534]'
                  }`}
                >
                  {currentCase.hasHardshipClause ? '✓ Applied (+12 Score)' : '+ Apply Fix'}
                </button>
              </div>
            </div>
          </div>

          {/* Appellate Strategy */}
          {stressResult?.appellateStrategy && (
            <div className="p-4 bg-[#EFF6FF] border border-[#BFDBFE] rounded-xl flex flex-col gap-1.5">
              <span className="text-[12.5px] font-bold text-[#1E40AF] uppercase tracking-wider flex items-center gap-1">
                <span className="material-symbols-outlined text-[16px]">alt_route</span>
                <span>Statutory Appellate Strategy</span>
              </span>
              <p className="text-[13.5px] text-[#1E3A8A] leading-relaxed">
                {stressResult.appellateStrategy}
              </p>
            </div>
          )}
        </div>
      )}

      {/* STEP 6: TRANSLATE OFFICIAL REPLY */}
      {activeStep === 6 && (
        <div className="bg-white border border-[#CBD5E1] rounded-2xl p-6 sm:p-7 shadow-sm flex flex-col gap-5 animate-in fade-in duration-150">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-[#E2E8F0]">
            <div>
              <h2 className="font-headline text-[20px] font-bold text-[#0F172A] flex items-center gap-2">
                <span className="material-symbols-outlined text-[#006c4a]">translate</span>
                <span>Translate Official Reply</span>
              </h2>
              <p className="text-[14px] text-[#64748B] mt-0.5">
                Received a vague, rejecting, or bureaucratic letter? Paste it here to uncover what it actually means and get a ready rebuttal.
              </p>
            </div>

            <button
              onClick={handleDecodeResponse}
              disabled={decodingResponse}
              className="bg-[#006c4a] hover:bg-[#005137] text-white px-4 py-2 rounded-xl text-[13px] font-semibold flex items-center gap-1.5 cursor-pointer shadow-xs transition-all disabled:opacity-50"
            >
              <span className="material-symbols-outlined text-[16px]">
                {decodingResponse ? 'sync' : 'bolt'}
              </span>
              <span>{decodingResponse ? 'Translating...' : 'Translate Reply'}</span>
            </button>
          </div>

          <div className="flex flex-col gap-3">
            <label className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider">
              Paste the letter or message you received:
            </label>
            <textarea
              value={customAgencyText}
              onChange={(e) => setCustomAgencyText(e.target.value)}
              placeholder="e.g. 'The requested records cannot be provided under Section 8(1)(h) pending ongoing inquiry, and your refund request cannot be entertained at this time...'"
              rows={3}
              className="w-full bg-[#F8FAFC] border border-[#CBD5E1] focus:border-[#006c4a] rounded-xl p-3 text-[14px] text-[#0F172A] outline-none"
            />
          </div>

          {/* Decoded Output */}
          <div className="p-5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl flex flex-col gap-4">
            <span className="text-[13px] font-bold text-[#0F172A] uppercase tracking-wider">
              Plain English Legal Analysis:
            </span>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-white p-4 rounded-xl border border-[#E2E8F0]">
                <p className="text-[12px] font-bold text-[#DC2626] uppercase">What They Actually Mean</p>
                <p className="text-[14px] text-[#334155] mt-1 font-medium leading-relaxed">
                  {decodedResult?.plainEnglish || decodedResult?.actualMeaning || 'They are using standard bureaucratic delay excuses hoping you miss the 30-day appeal deadline.'}
                </p>
              </div>

              <div className="bg-white p-4 rounded-xl border border-[#E2E8F0]">
                <p className="text-[12px] font-bold text-[#006c4a] uppercase">What You Should Do Next</p>
                <p className="text-[14px] text-[#334155] mt-1 font-medium leading-relaxed">
                  {decodedResult?.recommendedNextStep || decodedResult?.recommendedAction || 'Serve a 48-hour Demand for Segregation or immediately file a First Appeal before the First Appellate Authority.'}
                </p>
              </div>
            </div>

            {decodedResult?.suggestedRebuttal && (
              <div className="p-4 bg-white border border-[#CBD5E1] rounded-xl flex flex-col gap-2">
                <span className="text-[12px] font-bold text-[#0F172A] uppercase">Ready-to-Send Statutory Rebuttal:</span>
                <p className="text-[13.5px] font-mono text-[#334155] bg-[#F8FAFC] p-3 rounded-lg border border-[#E2E8F0]">
                  {decodedResult.suggestedRebuttal}
                </p>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};