'use client';

import { useState, useEffect } from 'react';
import { getCheatsheets } from '@/lib/actions/cheatsheetActions';
import { BookOpen, Copy, Check, Loader2 } from 'lucide-react';

export default function CheatsheetsPage() {
  const [copiedItem, setCopiedItem] = useState<string | null>(null);
  const [cheatsheets, setCheatsheets] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadData() {
      setLoading(true);
      const res = await getCheatsheets();
      setCheatsheets(res);
      setLoading(false);
    }
    loadData();
  }, []);

  const handleCopyCommand = async (command: string) => {
    try {
      await navigator.clipboard.writeText(command);
      setCopiedItem(command);
      setTimeout(() => setCopiedItem(null), 2000);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10 flex-1 w-full">
      
      {/* Page Header */}
      <div className="space-y-3">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
          <BookOpen className="w-4 h-4" />
          <span>Quick Reference Cheatsheets</span>
        </div>
        <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
          Developer Cheatsheets & Essential Commands
        </h1>
        <p className="text-sm text-slate-400 max-w-2xl">
          Copy Git, Next.js, Docker, and Python commands in one click directly from ayris.tech developer reference guides.
        </p>
      </div>

      {/* Cheatsheets List */}
      {loading ? (
        <div className="p-12 text-center text-slate-400 flex items-center justify-center gap-2">
          <Loader2 className="w-5 h-5 animate-spin text-red-500" />
          <span>Loading cheatsheets...</span>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {cheatsheets.map((sheet) => (
            <div key={sheet.id} className="p-6 rounded-3xl bg-slate-900/60 border border-slate-800 space-y-6 shadow-xl hover:border-slate-700 transition-colors">
              
              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-800 pb-4">
                <div>
                  <span className="text-[11px] font-bold text-red-400 bg-red-500/10 px-2.5 py-0.5 rounded-full border border-red-500/20">
                    {sheet.category}
                  </span>
                  <h2 className="text-xl font-bold text-white mt-2">{sheet.title}</h2>
                </div>
                <span className="text-[10px] text-slate-500 font-mono">
                  Updated: {new Date(sheet.lastUpdated).toLocaleDateString()}
                </span>
              </div>

              <p className="text-xs text-slate-400">{sheet.description}</p>

              {/* Items */}
              <div className="space-y-3">
                {sheet.items?.map((item: any, idx: number) => (
                  <div key={idx} className="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 group">
                    <div className="flex items-center justify-between gap-3">
                      <code className="text-xs font-mono font-bold text-red-300 bg-slate-900 px-2.5 py-1 rounded-lg border border-slate-800 break-all">
                        {item.command}
                      </code>

                      <button
                        onClick={() => handleCopyCommand(item.command)}
                        className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-colors flex-shrink-0"
                        title="Copy Command"
                      >
                        {copiedItem === item.command ? (
                          <Check className="w-3.5 h-3.5 text-emerald-400" />
                        ) : (
                          <Copy className="w-3.5 h-3.5 text-slate-400 group-hover:text-white" />
                        )}
                      </button>
                    </div>

                    <p className="text-[11px] text-slate-400 pl-1">{item.description}</p>
                  </div>
                ))}
              </div>

            </div>
          ))}
        </div>
      )}

    </div>
  );
}