import { useNavigate, Navigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";

export default function HomePage() {
  const navigate = useNavigate();
  const { isAuthenticated, isLoading } = useAuth();

  // If authenticated, redirect directly to cases
  if (isLoading) {
    return (
      <div className="bf-loading-screen">
        <div className="bf-loading-spinner"></div>
        <p>Loading...</p>
      </div>
    );
  }

  if (isAuthenticated) {
    return <Navigate to="/cases" replace />;
  }

  return (
    <div className="bf-home-page">
      {/* Hero Section */}
      <section className="bf-hero">
        <div className="bf-hero-content">
          <h1 className="bf-hero-title">
            Intelligent Scoliosis
            <br />
            <span className="bf-hero-accent">Brace Design</span>
          </h1>
          <p className="bf-hero-subtitle">
            Advanced AI-powered analysis and custom brace generation for scoliosis treatment.
            Upload an X-ray, get precise Cobb angle measurements and Rigo classification,
            and generate patient-specific 3D-printable braces.
          </p>
          <div className="bf-hero-actions">
            <button
              className="bf-hero-btn bf-hero-btn--primary"
              onClick={() => navigate("/login")}
            >
              Sign In
            </button>
          </div>
        </div>

        {/* Hero Visual - Spine illustration */}
        <div className="bf-hero-visual">
          <svg
            className="bf-hero-svg"
            viewBox="0 0 200 300"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Spine curve */}
            <path
              d="M100 20 C 80 60 120 100 100 140 C 80 180 120 220 100 260"
              stroke="rgba(255,255,255,0.3)"
              strokeWidth="4"
              strokeLinecap="round"
              fill="none"
              className="bf-hero-spine"
            />
            {/* Vertebrae */}
            {[40, 80, 120, 160, 200, 240].map((y, i) => (
              <circle
                key={i}
                cx={100 + (i % 2 === 0 ? -10 : 10) * Math.sin((i * Math.PI) / 3)}
                cy={y}
                r="12"
                fill="rgba(221, 130, 80, 0.15)"
                stroke="var(--accent-primary)"
                strokeWidth="2"
                className="bf-hero-vertebra"
                style={{ animationDelay: `${i * 0.15}s` }}
              />
            ))}
            {/* Brace outline */}
            <path
              d="M60 60 Q 40 150 60 240 L 140 240 Q 160 150 140 60 Z"
              stroke="var(--accent-primary)"
              strokeWidth="3"
              strokeDasharray="8 4"
              fill="none"
              opacity="0.6"
              className="bf-hero-brace"
            />
          </svg>
        </div>
      </section>

      {/* Features Section */}
      <section className="bf-features">
        <div className="bf-features-grid">
          <div className="bf-feature-card">
            <div className="bf-feature-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14 2 14 8 20 8" />
                <circle cx="12" cy="15" r="3" />
              </svg>
            </div>
            <h3 className="bf-feature-title">X-ray Analysis</h3>
            <p className="bf-feature-desc">
              Upload spinal X-rays for automatic vertebrae detection and landmark identification
              using advanced computer vision.
            </p>
          </div>

          <div className="bf-feature-card">
            <div className="bf-feature-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M12 2L2 7l10 5 10-5-10-5z" />
                <path d="M2 17l10 5 10-5" />
                <path d="M2 12l10 5 10-5" />
              </svg>
            </div>
            <h3 className="bf-feature-title">Cobb Angle Measurement</h3>
            <p className="bf-feature-desc">
              Precise calculation of Cobb angles (PT, MT, TL) with severity classification
              and Rigo-Chêneau type determination.
            </p>
          </div>

          <div className="bf-feature-card">
            <div className="bf-feature-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
                <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
                <polyline points="7.5 19.79 7.5 14.6 3 12" />
                <polyline points="21 12 16.5 14.6 16.5 19.79" />
                <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
                <line x1="12" y1="22.08" x2="12" y2="12" />
              </svg>
            </div>
            <h3 className="bf-feature-title">3D Brace Generation</h3>
            <p className="bf-feature-desc">
              Generate custom 3D-printable braces with patient-specific pressure zones
              and relief windows based on curve analysis.
            </p>
          </div>
        </div>
      </section>

      {/* Workflow Section */}
      <section className="bf-workflow">
        <h2 className="bf-section-heading">How It Works</h2>
        <div className="bf-workflow-steps">
          <div className="bf-workflow-step">
            <div className="bf-workflow-number">1</div>
            <div className="bf-workflow-content">
              <h4>Upload X-ray</h4>
              <p>Upload a spinal PA/AP X-ray image</p>
            </div>
          </div>
          <div className="bf-workflow-connector" />
          <div className="bf-workflow-step">
            <div className="bf-workflow-number">2</div>
            <div className="bf-workflow-content">
              <h4>Review Analysis</h4>
              <p>Verify landmarks and measurements</p>
            </div>
          </div>
          <div className="bf-workflow-connector" />
          <div className="bf-workflow-step">
            <div className="bf-workflow-number">3</div>
            <div className="bf-workflow-content">
              <h4>Generate Brace</h4>
              <p>Create custom 3D brace design</p>
            </div>
          </div>
          <div className="bf-workflow-connector" />
          <div className="bf-workflow-step">
            <div className="bf-workflow-number">4</div>
            <div className="bf-workflow-content">
              <h4>Download & Print</h4>
              <p>Export STL files for 3D printing</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bf-home-footer">
        <p>BraceIQ Development Environment</p>
      </footer>
    </div>
  );
}
