import { CheckCircle, Terminal, Database, Globe, Settings, Zap } from "lucide-react";

export const metadata = {
  title: "Install Guide | MediTransplant",
  description: "Complete installation guide for MediTransplant medical tourism platform",
};

const CodeBlock = ({ children, lang = "bash" }: { children: string; lang?: string }) => (
  <div className="relative">
    <div className="flex items-center justify-between bg-slate-800 px-4 py-2 rounded-t-lg">
      <span className="text-xs text-slate-400 font-mono">{lang}</span>
      <span className="w-2 h-2 bg-green-400 rounded-full" />
    </div>
    <pre className="bg-slate-900 text-green-400 text-xs font-mono p-4 rounded-b-lg overflow-x-auto whitespace-pre-wrap leading-relaxed">
      {children}
    </pre>
  </div>
);

export default function InstallGuidePage() {
  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-green-700 to-green-600 text-white py-12 px-4">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
              <Terminal className="w-5 h-5" />
            </div>
            <h1 className="text-2xl font-bold">MediTransplant – Full Install Guide</h1>
          </div>
          <p className="text-green-100 text-sm max-w-2xl">
            Complete setup guide for the Next.js + PostgreSQL medical tourism platform. Modern, SEO-friendly, and production-ready.
          </p>
          <div className="flex flex-wrap gap-2 mt-4">
            {["Next.js 15", "TypeScript", "PostgreSQL", "Drizzle ORM", "Tailwind CSS", "Framer Motion"].map((tech) => (
              <span key={tech} className="bg-white/20 text-white text-xs font-medium px-2.5 py-1 rounded-full">
                {tech}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-10 space-y-10">

        {/* Tech Stack */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <Zap className="w-5 h-5 text-yellow-500" />
            Tech Stack Overview
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {[
              { name: "Next.js 15 (App Router)", desc: "React framework with SSR, ISR & RSC", color: "bg-blue-50 border-blue-200" },
              { name: "TypeScript 5", desc: "Full type-safety across frontend & backend", color: "bg-purple-50 border-purple-200" },
              { name: "PostgreSQL 16", desc: "Primary relational database", color: "bg-blue-50 border-blue-200" },
              { name: "Drizzle ORM", desc: "Type-safe ORM with schema-push migrations", color: "bg-green-50 border-green-200" },
              { name: "Tailwind CSS v4", desc: "Utility-first styling", color: "bg-sky-50 border-sky-200" },
              { name: "Lucide React", desc: "Consistent icon library", color: "bg-orange-50 border-orange-200" },
            ].map((item) => (
              <div key={item.name} className={`border rounded-xl p-3 ${item.color}`}>
                <p className="text-sm font-semibold text-slate-800">{item.name}</p>
                <p className="text-xs text-slate-500 mt-0.5">{item.desc}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Prerequisites */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <Settings className="w-5 h-5 text-slate-500" />
            Prerequisites
          </h2>
          <div className="bg-white border border-slate-200 rounded-xl p-4 space-y-2">
            {[
              "Node.js 20+ (LTS recommended)",
              "PostgreSQL 14+ installed locally or via Docker",
              "Git",
              "npm or yarn or pnpm",
            ].map((item) => (
              <div key={item} className="flex items-center gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
                {item}
              </div>
            ))}
          </div>
        </section>

        {/* Step 1: Clone */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">1</span>
            Clone & Install Dependencies
          </h2>
          <div className="space-y-3">
            <CodeBlock lang="bash">{`# Clone the repository
git clone https://github.com/your-org/meditransplant.git
cd meditransplant

# Install dependencies
npm install

# Or with yarn
yarn install

# Or with pnpm
pnpm install`}</CodeBlock>
          </div>
        </section>

        {/* Step 2: Environment */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">2</span>
            Configure Environment Variables
          </h2>
          <p className="text-sm text-slate-500 mb-3">
            Copy the example env file and fill in your values:
          </p>
          <CodeBlock lang="bash">{`cp .env.example .env`}</CodeBlock>
          <div className="mt-3">
            <CodeBlock lang=".env">{`# Database
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/meditransplant_db

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
NODE_ENV=development

# Optional: WhatsApp Business API
WHATSAPP_TOKEN=your_whatsapp_business_token

# Optional: Email (e.g. Resend / SendGrid)
RESEND_API_KEY=re_xxxxxxxxxx

# Optional: Google Analytics
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX`}</CodeBlock>
          </div>
        </section>

        {/* Step 3: Database */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">3</span>
            <Database className="w-5 h-5 text-slate-500" />
            Database Setup
          </h2>
          <div className="space-y-3">
            <p className="text-sm text-slate-600 font-medium">Option A – Local PostgreSQL:</p>
            <CodeBlock lang="bash">{`# Create database
psql -U postgres -c "CREATE DATABASE meditransplant_db;"

# Push schema (Drizzle ORM)
npx drizzle-kit push

# Seed initial data
curl -X POST http://localhost:3000/api/seed`}</CodeBlock>

            <p className="text-sm text-slate-600 font-medium mt-4">Option B – Docker:</p>
            <CodeBlock lang="bash">{`# Start PostgreSQL via Docker
docker run --name meditransplant-db \\
  -e POSTGRES_PASSWORD=postgres \\
  -e POSTGRES_DB=meditransplant_db \\
  -p 5432:5432 \\
  -d postgres:16-alpine

# Then push schema
npx drizzle-kit push`}</CodeBlock>
          </div>
        </section>

        {/* Step 4: Run Dev */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">4</span>
            Run Development Server
          </h2>
          <CodeBlock lang="bash">{`npm run dev
# App runs at http://localhost:3000
# Admin at http://localhost:3000/admin
# API health: http://localhost:3000/api/health`}</CodeBlock>
        </section>

        {/* Step 5: Build */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">5</span>
            Production Build
          </h2>
          <CodeBlock lang="bash">{`# Type check
npx tsc --noEmit

# Build
npm run build

# Start production server
npm start

# Or with PM2
npm install -g pm2
pm2 start npm --name "meditransplant" -- start
pm2 save
pm2 startup`}</CodeBlock>
        </section>

        {/* Step 6: Security */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">6</span>
            Security Implementation
          </h2>
          <div className="bg-white border border-slate-200 rounded-xl p-4 space-y-3">
            <p className="text-sm text-slate-600">
              The application is secured using Next.js Middleware and standard web security practices.
            </p>
            <ul className="space-y-2">
              <li className="flex items-start gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                <strong>Admin Authentication:</strong> The <code>/admin</code> dashboard is protected via Basic Authentication at the edge (Middleware). You must provide valid credentials to access any admin route.
              </li>
              <li className="flex items-start gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                <strong>Default Credentials:</strong> Username: <code>admin</code>, Password: <code>meditransplant2026</code>. You should change these by setting <code>ADMIN_USER</code> and <code>ADMIN_PASSWORD</code> in your <code>.env</code> file.
              </li>
              <li className="flex items-start gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                <strong>Environment Variables:</strong> API keys, database credentials, and secrets are stored in the server environment, never exposed to the client bundle.
              </li>
              <li className="flex items-start gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                <strong>SQL Injection Prevention:</strong> Drizzle ORM uses parameterized queries automatically, preventing SQL injection attacks.
              </li>
            </ul>
          </div>
        </section>

        {/* Step 7: Deploy */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
            <span className="w-7 h-7 bg-green-600 text-white text-sm font-bold rounded-full flex items-center justify-center">7</span>
            <Globe className="w-5 h-5 text-slate-500" />
            Deployment Options
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {[
              {
                name: "Vercel (Recommended)",
                steps: ["Connect GitHub repo to Vercel", "Add environment variables in Vercel dashboard", "Use Neon / Supabase for managed PostgreSQL", "Auto-deploy on push to main"],
              },
              {
                name: "VPS / Ubuntu Server",
                steps: ["Install Node.js 20+ via nvm", "Install PostgreSQL 16", "Clone repo & install dependencies", "Configure Nginx as reverse proxy", "Use PM2 for process management", "Set up SSL with Certbot"],
              },
            ].map((opt) => (
              <div key={opt.name} className="bg-white border border-slate-200 rounded-xl p-4">
                <h3 className="text-sm font-bold text-slate-800 mb-3">{opt.name}</h3>
                <ul className="space-y-1.5">
                  {opt.steps.map((step) => (
                    <li key={step} className="flex items-start gap-2 text-xs text-slate-600">
                      <CheckCircle className="w-3.5 h-3.5 text-green-500 flex-shrink-0 mt-0.5" />
                      {step}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>

        {/* Nginx Config */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4">Nginx Configuration</h2>
          <CodeBlock lang="nginx">{`server {
    listen 80;
    server_name www.meditransplant.com.bd meditransplant.com.bd;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

# Admin subdomain
server {
    listen 80;
    server_name admin.meditransplant.com.bd;

    location / {
        proxy_pass http://localhost:3000/admin;
        # Same proxy headers...
    }
}`}</CodeBlock>
        </section>

        {/* API Endpoints */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4">API Endpoints Reference</h2>
          <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100">
                  <th className="text-left text-xs font-semibold text-slate-500 px-4 py-3">Method</th>
                  <th className="text-left text-xs font-semibold text-slate-500 px-4 py-3">Endpoint</th>
                  <th className="text-left text-xs font-semibold text-slate-500 px-4 py-3">Description</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-50">
                {[
                  { method: "GET", endpoint: "/api/health", desc: "Health check endpoint" },
                  { method: "POST", endpoint: "/api/seed", desc: "Seed database with initial data" },
                  { method: "GET", endpoint: "/api/site", desc: "Fetch all frontend content" },
                  { method: "GET", endpoint: "/api/admin/dashboard", desc: "Dashboard metrics & data" },
                  { method: "GET", endpoint: "/api/admin/leads", desc: "List all leads" },
                  { method: "POST", endpoint: "/api/admin/leads", desc: "Create new lead" },
                  { method: "POST", endpoint: "/api/consultation", desc: "Submit consultation request" },
                ].map((row) => (
                  <tr key={row.endpoint} className="hover:bg-slate-50">
                    <td className="px-4 py-2.5">
                      <span className={`text-xs font-bold px-2 py-0.5 rounded ${row.method === "GET" ? "bg-blue-100 text-blue-700" : "bg-green-100 text-green-700"}`}>
                        {row.method}
                      </span>
                    </td>
                    <td className="px-4 py-2.5 text-xs font-mono text-slate-700">{row.endpoint}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-500">{row.desc}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {/* Drizzle Schema */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4">Database Schema Overview</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
            {[
              "site_settings", "hero_content", "stats", "services",
              "treatment_packages", "hospitals", "journey_steps",
              "testimonials", "blog_posts", "leads", "dashboard_metrics",
              "payments", "monthly_conversions", "nav_items"
            ].map((table) => (
              <div key={table} className="bg-slate-800 text-green-400 text-xs font-mono px-3 py-2 rounded-lg">
                {table}
              </div>
            ))}
          </div>
        </section>

        {/* SEO Notes */}
        <section>
          <h2 className="text-lg font-bold text-slate-900 mb-4">SEO Best Practices Implemented</h2>
          <div className="bg-white border border-slate-200 rounded-xl p-4 space-y-2">
            {[
              "Next.js Metadata API for all pages (title, description, OG tags)",
              "JSON-LD structured data (MedicalOrganization schema)",
              "robots.txt configuration (index public pages, noindex admin)",
              "Sitemap.xml generation support",
              "Semantic HTML5 structure (header, main, nav, section, article)",
              "Image optimization with next/image (lazy loading, WebP)",
              "Core Web Vitals optimized (LCP, FID, CLS)",
              "Bangla + English keyword support",
              "Mobile-first responsive design",
              "HTTP/2 ready with compression",
            ].map((item) => (
              <div key={item} className="flex items-start gap-2 text-sm text-slate-700">
                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                {item}
              </div>
            ))}
          </div>
        </section>

        {/* Footer */}
        <div className="bg-green-50 border border-green-200 rounded-xl p-5 text-center">
          <p className="text-sm font-semibold text-green-800 mb-1">🎉 Setup Complete!</p>
          <p className="text-xs text-green-700">
            Visit <a href="/" className="font-bold underline">/</a> for the public website and{" "}
            <a href="/admin" className="font-bold underline">/admin</a> for the dashboard.
          </p>
        </div>
      </div>
    </div>
  );
}