'use client';

import React, { useState } from 'react';
import { BookOpen, Search, Code, Check, Copy, ArrowRight, FileText, Zap, Shield, CreditCard, Bot, Layers } from 'lucide-react';

export default function DocsSection() {
  const [activeCategory, setActiveCategory] = useState<'quickstart' | 'catalog' | 'payments' | 'bot' | 'api'>('quickstart');
  const [searchQuery, setSearchQuery] = useState('');
  const [copiedCode, setCopiedCode] = useState<string | null>(null);

  const handleCopy = (code: string, id: string) => {
    navigator.clipboard.writeText(code);
    setCopiedCode(id);
    setTimeout(() => setCopiedCode(null), 2000);
  };

  const categories = [
    { id: 'quickstart', label: 'Quick Start', icon: <Zap className="w-4 h-4" /> },
    { id: 'catalog', label: 'Meta Catalog Sync', icon: <Layers className="w-4 h-4" /> },
    { id: 'payments', label: 'Payments (Paynow/EcoCash)', icon: <CreditCard className="w-4 h-4" /> },
    { id: 'bot', label: 'AI Bot & Flow Engine', icon: <Bot className="w-4 h-4" /> },
    { id: 'api', label: 'REST API & Webhooks', icon: <Code className="w-4 h-4" /> },
  ];

  return (
    <section id="docs" className="bg-[#FAF9F5] py-20 border-b border-slate-900/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-10">
          <div>
            <span className="border-2 border-slate-900 bg-white px-3.5 py-1 text-[11px] font-bold uppercase tracking-widest text-slate-900 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)] inline-block mb-3">
              DOCUMENTATION & GUIDES
            </span>
            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight font-sans">
              Developer & Merchant Docs
            </h2>
            <p className="text-slate-600 text-sm sm:text-base mt-2 max-w-xl">
              Everything you need to configure your WhatsApp storefront, integrate EcoCash/Paynow payment gateways, and connect your catalogs.
            </p>
          </div>

          {/* Quick Search */}
          <div className="mt-4 md:mt-0 relative w-full md:w-72">
            <input 
              type="text"
              placeholder="Search docs (e.g. EcoCash, Webhooks)..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-white border-2 border-slate-900 px-4 py-2.5 pl-10 text-xs text-slate-800 placeholder-slate-400 font-sans shadow-[3px_3px_0px_0px_rgba(15,23,42,1)] outline-none focus:border-emerald-600"
            />
            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
          </div>
        </div>

        {/* Category Tabs */}
        <div className="flex flex-wrap gap-2 mb-8 border-b-2 border-slate-900 pb-4">
          {categories.map((cat) => (
            <button
              key={cat.id}
              onClick={() => setActiveCategory(cat.id as any)}
              className={`px-4 py-2.5 text-xs font-extrabold uppercase tracking-wider transition-all flex items-center gap-2 border-2 ${
                activeCategory === cat.id
                  ? 'bg-slate-900 text-white border-slate-900 shadow-[3px_3px_0px_0px_rgba(16,185,129,1)]'
                  : 'bg-white text-slate-700 border-slate-900 hover:bg-slate-100 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]'
              }`}
            >
              {cat.icon}
              {cat.label}
            </button>
          ))}
        </div>

        {/* Docs Main Content Panel */}
        <div className="bg-white border-2 border-slate-900 shadow-[6px_6px_0px_0px_rgba(15,23,42,1)] p-6 sm:p-8">
          
          {/* Category 1: Quick Start */}
          {activeCategory === 'quickstart' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-black text-slate-900 mb-2 flex items-center gap-2">
                  <Zap className="w-5 h-5 text-emerald-600" />
                  Quick Start Guide: Setting Up Your WhatsApp Store
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Follow these 3 steps to connect your WhatsApp Business phone number and activate automated commerce sessions.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-2">
                <div className="bg-slate-50 border-2 border-slate-900 p-4 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]">
                  <span className="w-6 h-6 bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3">1</span>
                  <h4 className="font-extrabold text-sm text-slate-900 mb-1">Create Merchant Account</h4>
                  <p className="text-xs text-slate-600">Register your store business profile and get instant access to the simulator and merchant dashboard.</p>
                </div>

                <div className="bg-slate-50 border-2 border-slate-900 p-4 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]">
                  <span className="w-6 h-6 bg-emerald-600 text-white font-black text-xs flex items-center justify-center mb-3">2</span>
                  <h4 className="font-extrabold text-sm text-slate-900 mb-1">Connect Meta Catalog</h4>
                  <p className="text-xs text-slate-600">Link your Facebook/Meta Catalog ID or import CSV items directly into Commerce Hub.</p>
                </div>

                <div className="bg-slate-50 border-2 border-slate-900 p-4 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]">
                  <span className="w-6 h-6 bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3">3</span>
                  <h4 className="font-extrabold text-sm text-slate-900 mb-1">Enable Payments & Webhooks</h4>
                  <p className="text-xs text-slate-600">Set your Paynow Integration Key or EcoCash merchant ID to receive real-time payouts.</p>
                </div>
              </div>
            </div>
          )}

          {/* Category 2: Meta Catalog Sync */}
          {activeCategory === 'catalog' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-black text-slate-900 mb-2 flex items-center gap-2">
                  <Layers className="w-5 h-5 text-emerald-600" />
                  Meta Commerce Catalog Integration
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Sync inventory bi-directionally with Meta Graph API (`v19.0`) so WhatsApp interactive product cards show live pricing and stock levels.
                </p>
              </div>

              <div className="bg-slate-900 text-slate-100 p-4 border-2 border-slate-900 font-mono text-xs overflow-x-auto relative">
                <div className="flex justify-between items-center mb-2 pb-2 border-b border-slate-800 text-[10px] text-slate-400">
                  <span>POST /api/connectors/meta/sync-catalog</span>
                  <button 
                    onClick={() => handleCopy(`curl -X POST https://api.whatsappcommerce.hub/v1/meta/catalog/sync \\
  -H "Authorization: Bearer YOUR_API_TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{"catalogId": "META_CATALOG_12389", "autoApprove": true}'`, 'code-catalog')}
                    className="flex items-center gap-1 text-emerald-400 hover:underline"
                  >
                    {copiedCode === 'code-catalog' ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                    <span>{copiedCode === 'code-catalog' ? 'Copied' : 'Copy Payload'}</span>
                  </button>
                </div>
                <pre>{`curl -X POST https://api.whatsappcommerce.hub/v1/meta/catalog/sync \\
  -H "Authorization: Bearer YOUR_API_TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{
    "catalogId": "META_CATALOG_12389",
    "autoApprove": true,
    "currency": "USD"
  }'`}</pre>
              </div>
            </div>
          )}

          {/* Category 3: Payments */}
          {activeCategory === 'payments' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-black text-slate-900 mb-2 flex items-center gap-2">
                  <CreditCard className="w-5 h-5 text-emerald-600" />
                  EcoCash, Paynow & Card Payment Gateways
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Support both EcoCash mobile money (ZWL & USD) and Paynow online checkout without sending customers away from the WhatsApp conversation.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="border-2 border-slate-900 p-4 bg-slate-50">
                  <h4 className="font-extrabold text-slate-900 text-sm mb-1">EcoCash Direct USSD Push</h4>
                  <p className="text-xs text-slate-600 mb-2">Triggers a prompt directly on customer mobile devices for immediate PIN authorization.</p>
                  <span className="bg-emerald-100 text-emerald-800 text-[10px] font-black px-2 py-0.5 border border-emerald-300">Instant Settlement</span>
                </div>
                <div className="border-2 border-slate-900 p-4 bg-slate-50">
                  <h4 className="font-extrabold text-slate-900 text-sm mb-1">Paynow Zimbabwe Gateway</h4>
                  <p className="text-xs text-slate-600 mb-2">Supports Visa, Mastercard, InnBucks, ZimSwitch, and EcoCash express link.</p>
                  <span className="bg-emerald-100 text-emerald-800 text-[10px] font-black px-2 py-0.5 border border-emerald-300">Multi-Currency</span>
                </div>
              </div>
            </div>
          )}

          {/* Category 4: AI Bot */}
          {activeCategory === 'bot' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-black text-slate-900 mb-2 flex items-center gap-2">
                  <Bot className="w-5 h-5 text-emerald-600" />
                  AI Automated Agent & Custom Flow Engine
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Configure custom intent prompts so the bot automatically answers product inquiries, calculates delivery fees, and sends invoice links.
                </p>
              </div>

              <div className="bg-slate-900 text-slate-100 p-4 border-2 border-slate-900 font-mono text-xs">
                <div className="text-[10px] text-slate-400 mb-2 border-b border-slate-800 pb-1">
                  // Sample System Prompt Configuration
                </div>
                <pre className="text-emerald-400">{`const botConfig = {
  storeName: "Harare Tech Outlet",
  aiAgentEnabled: true,
  autoCheckoutTrigger: "BUY_NOW",
  acceptedPayments: ["ECOCASH_USD", "PAYNOW_CARD"],
  fallbackAgentNumber: "+263771234567"
};`}</pre>
              </div>
            </div>
          )}

          {/* Category 5: REST API & Webhooks */}
          {activeCategory === 'api' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-black text-slate-900 mb-2 flex items-center gap-2">
                  <Code className="w-5 h-5 text-emerald-600" />
                  REST API & Inbound Webhooks
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Receive webhook notifications whenever a customer places an order, completes payment, or triggers a support escalation.
                </p>
              </div>

              <div className="bg-slate-900 text-slate-100 p-4 border-2 border-slate-900 font-mono text-xs overflow-x-auto relative">
                <div className="flex justify-between items-center mb-2 pb-2 border-b border-slate-800 text-[10px] text-slate-400">
                  <span>Webhook Event Payload: order.payment_completed</span>
                  <button 
                    onClick={() => handleCopy(`{
  "event": "order.payment_completed",
  "orderId": "ORD-84920",
  "amount": 98.00,
  "currency": "USD",
  "paymentMethod": "ECOCASH",
  "customerPhone": "+263771234567",
  "timestamp": "2026-07-28T15:30:00Z"
}`, 'code-webhook')}
                    className="flex items-center gap-1 text-emerald-400 hover:underline"
                  >
                    {copiedCode === 'code-webhook' ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                    <span>{copiedCode === 'code-webhook' ? 'Copied' : 'Copy JSON'}</span>
                  </button>
                </div>
                <pre>{`{
  "event": "order.payment_completed",
  "orderId": "ORD-84920",
  "amount": 98.00,
  "currency": "USD",
  "paymentMethod": "ECOCASH",
  "customerPhone": "+263771234567",
  "timestamp": "2026-07-28T15:30:00Z"
}`}</pre>
              </div>
            </div>
          )}

        </div>

      </div>
    </section>
  );
}