import { Link } from 'react-router-dom';
import { Warehouse, Cylinder, Church, CircleDot, Square, Layers, BarChart3, Frame, Tent, Calculator } from 'lucide-react';
import { useI18n } from '../store/i18nStore';
import { useWindStore } from '../store/appStore';
import { usePersistentState } from '@/hooks/usePersistentState';

// Mocked icons for bridge and tower to match App.tsx
const BridgeIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M3 18V6l3-1 6 3 6-3 3 1v12" />
    <path d="M3 10h18" />
    <path d="M8 10v8M16 10v8" />
    <path d="M3 14c4-2 6-2 10 0s6 2 8 0" />
  </svg>
);

const TowerIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M6 22L10 2M18 22L14 2" />
    <path d="M10 2h4" />
    <path d="M8.5 7h7" />
    <path d="M7.5 12h9" />
    <path d="M6.5 17h11" />
    <path d="M6 22h12" />
    <path d="M10 2l4 5M12 7l-4 5" />
    <path d="M10 12l5 5M14 12l-5 5" />
    <path d="M9.5 17l5.5 5M14.5 17l-5.5 5" />
  </svg>
);

export default function HomeMock() {
  const { t } = useI18n();
  const { v0, s1, s2, s3, vk, q, locality } = useWindStore();

  const modules = [
    { to: '/galpao', icon: Warehouse, label: 'Galpão Retangular', desc: 'Paredes A/B/C/D, telhados E-J, excentricidade, atrito, alta turbulência.' },
    { to: '/cilindro', icon: Cylinder, label: 'Cilindro Vertical', desc: 'Silos, reservatórios, chaminés. Cpe por ângulo (Tab. 13), Reynolds.' },
    { to: '/abobada', icon: Church, label: 'Abóbada Cilíndrica', desc: 'Coberturas curvas em arco. Tab. 15-20, 6 zonas.' },
    { to: '/cupula', icon: CircleDot, label: 'Cúpula', desc: 'Sobre terreno (Tab. 21) ou parede cilíndrica (Tab. 22).' },
    { to: '/muros', icon: Square, label: 'Muros e Placas', desc: 'Cf para vento perpendicular e oblíquo (Tab. 23).' },
    { to: '/cobertura-isolada', icon: Layers, label: 'Coberturas Isoladas', desc: 'Uma ou duas águas, abas perpendiculares (Tab. 24-25).' },
    { to: '/barras', icon: BarChart3, label: 'Barras Prismáticas', desc: 'Faces planas (Tab. 26) ou circulares (Tab. 27).' },
    { to: '/pontes', icon: BridgeIcon, label: 'Pontes', desc: 'Pse, Cx/Cz do tabuleiro, flutter, galope (sec. 11).' },
    { to: '/torre', icon: TowerIcon, label: 'Torres', desc: 'Torres treliçadas e mastros (sec. 8.4).' },
    { to: '/piperack', icon: Frame, label: 'Pipe-Racks Industriais', desc: 'Estruturas reticuladas múltiplas, tubulações, fator η (Tab. 28).' },
    { to: '/abrigo', icon: Tent, label: 'Abrigos e Pórticos Fechados', desc: 'Marquises, abrigos e pórticos. 4 condições topológicas, frestas de alívio, corte A-A (Tab. 23-25, sec. 6.3).' },
    { to: '/calc-ca', icon: Calculator, label: 'Calculadora de C_a', desc: 'Coeficiente de arrasto (Fig. 4 e 5).' },
  ];

  return (
    <div className="p-8 max-w-6xl mx-auto space-y-8 animate-in fade-in duration-500">
      <header className="text-center space-y-4 flex flex-col items-center mt-4 mb-6">
        <div className="relative inline-block">
          <img src="/logo_brainwind.png" alt="BrainWind" className="h-20 md:h-28 w-auto object-contain dark:drop-shadow-[0_0_15px_rgba(255,255,255,0.4)]" />
          <span className="absolute -bottom-1 -right-2 md:-right-6 bg-primary text-primary-foreground text-[10px] md:text-xs font-bold px-2 py-0.5 rounded-full shadow-sm border border-primary-foreground/20">v1.1</span>
        </div>
        <p className="text-muted-foreground text-lg">
          {t('app_subtitle')}
        </p>
      </header>

      {/* Dashboard de Vento Básico */}
      <div className="bg-card border rounded-xl p-6 shadow-sm">
        <h3 className="font-semibold text-lg mb-4 text-card-foreground">Parâmetros Atuais do Vento {locality ? `(${locality})` : ''}</h3>
        <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
          <div className="flex flex-col items-center justify-center p-3 bg-muted/50 rounded-lg border">
            <span className="text-xs text-muted-foreground">V₀ (m/s)</span>
            <span className="font-bold text-xl">{v0.toFixed(1)}</span>
          </div>
          <div className="flex flex-col items-center justify-center p-3 bg-muted/50 rounded-lg border">
            <span className="text-xs text-muted-foreground">S₁</span>
            <span className="font-bold text-xl">{s1.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center justify-center p-3 bg-muted/50 rounded-lg border">
            <span className="text-xs text-muted-foreground">S₂</span>
            <span className="font-bold text-xl">{s2.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center justify-center p-3 bg-muted/50 rounded-lg border">
            <span className="text-xs text-muted-foreground">S₃</span>
            <span className="font-bold text-xl">{s3.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center justify-center p-3 bg-muted/50 rounded-lg border">
            <span className="text-xs text-muted-foreground">Vₖ (m/s)</span>
            <span className="font-bold text-xl text-primary">{vk.toFixed(1)}</span>
          </div>
          <div className="flex flex-col items-center justify-center p-3 bg-primary/10 rounded-lg border border-primary/20">
            <span className="text-xs text-primary/80 font-medium">q (kN/m²)</span>
            <span className="font-bold text-2xl text-primary">{q.toFixed(3)}</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {modules.map((m) => (
          <Link key={m.to} to={m.to} className="block p-6 rounded-xl border bg-card hover:shadow-lg hover:border-primary transition-all">
            <m.icon className="w-8 h-8 text-primary mb-3" />
            <h2 className="font-semibold text-lg mb-1">{m.label}</h2>
            <p className="text-sm text-muted-foreground">{m.desc}</p>
          </Link>
        ))}
      </div>

      <div className="rounded-lg border bg-muted/40 p-4 text-sm text-muted-foreground">
        <p className="font-medium text-foreground mb-2">{t('home_full_coverage')}</p>
        <ul className="grid grid-cols-2 md:grid-cols-4 gap-1 text-xs">
          <li>✓ Sec. 5 — V₀, S₁, S₂, S₃</li>
          <li>✓ Sec. 6.1 — Paralelepipédicas</li>
          <li>✓ Sec. 6.2 — Cilindros, abóbadas, cúpulas</li>
          <li>✓ Sec. 6.3 — Pressão interna (Cpi)</li>
          <li>✓ Sec. 6.4 — Vizinhança</li>
          <li>✓ Sec. 7 — Muros, coberturas isoladas</li>
          <li>✓ Sec. 8 — Barras e reticulados</li>
          <li>✓ Sec. 9 — Efeitos dinâmicos</li>
          <li>✓ Sec. 10 — Vórtices</li>
          <li>✓ Sec. 11 — Pontes</li>
          <li>✓ Anexo A — S₂(qualquer t)</li>
          <li>✓ Anexo B — S₃(Pₘ, vida útil)</li>
          <li>✓ Anexo C — 49 estações</li>
        </ul>
      </div>
    </div>
  );
}