import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { getSolution } from '../data/solutions';
import { SolutionIcon } from '../components/SolutionIcon';
import { LoginBox } from '../components/LoginBox';
import { FeatureGrid } from '../components/FeatureGrid';
import { StepGuide } from '../components/StepGuide';
import { MobileScreenList } from '../components/MobileScreenList';

export const SolutionDetailPage: React.FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const solution = slug ? getSolution(slug) : undefined;

  if (!solution) {
    return (
      <main className="section">
        <div className="container">
          <h1 className="section-title">솔루션을 찾을 수 없습니다</h1>
          <Link to="/catalog" className="btn-primary" style={{ marginTop: 16, display: 'inline-block' }}>
            전체 솔루션으로
          </Link>
        </div>
      </main>
    );
  }

  const { name, tagline, color, status, category, access, features, steps, mobileScreens } = solution;
  const soon = status === 'soon';

  return (
    <main className="detail">
      {/* Header */}
      <section
        className="detail-header"
        style={{ background: `radial-gradient(900px 360px at 18% -20%, ${color}33, transparent 70%)` }}
      >
        <div className="container">
          <Link to="/catalog" className="detail-back">← 전체 솔루션</Link>
          <div className="detail-header-row">
            <span
              className="detail-icon"
              style={{ color, background: `${color}1a`, borderColor: `${color}40` }}
            >
              <SolutionIcon slug={solution.slug} size={44} color={color} />
            </span>
            <div>
              <div className="detail-title-row">
                <h1 className="detail-title">{name}</h1>
                {status === 'live' ? (
                  <span className="badge badge-live">LIVE</span>
                ) : (
                  <span className="badge badge-soon">SOON</span>
                )}
              </div>
              <p className="detail-tagline">{tagline}</p>
              <span className="detail-cat">{category}</span>
            </div>
          </div>
        </div>
      </section>

      <div className="container detail-body">
        {/* Login */}
        <section className="detail-section">
          <LoginBox access={access} color={color} soon={soon} />
        </section>

        {/* Features */}
        <section className="detail-section">
          <h2 className="section-title">주요 기능</h2>
          <p className="section-sub">{name}의 핵심 기능입니다.</p>
          <FeatureGrid features={features} color={color} />
        </section>

        {/* Steps */}
        <section className="detail-section">
          <h2 className="section-title">단계별 시연 가이드</h2>
          <p className="section-sub">아래 순서대로 따라 하면 주요 기능을 확인할 수 있습니다.</p>
          <StepGuide steps={steps} color={color} />
        </section>

        {/* Mobile */}
        <section className="detail-section">
          <h2 className="section-title">모바일 앱 화면</h2>
          <p className="section-sub">현장·관리자·사용자용 모바일 화면 구성입니다.</p>
          <MobileScreenList screens={mobileScreens} color={color} slug={solution.slug} />
        </section>
      </div>
    </main>
  );
};

export default SolutionDetailPage;
