import React from 'react';
import { Calendar, User, Target, ChevronRight, Printer, Share2, Info } from 'lucide-react';
import { MEETING_OVERVIEW } from '../constants';

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <div className="min-h-screen flex flex-col md:flex-row">
      {/* Sidebar - Desktop Only */}
      <aside className="hidden md:flex w-72 bg-white border-r border-slate-200 flex-col sticky top-0 h-screen">
        <div className="p-6 border-b border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <span className="bg-indigo-600 text-white p-1 rounded font-bold text-sm">SAM</span>
            <span className="font-bold text-slate-800 tracking-tight">Project Dashboard</span>
          </div>
          <p className="text-xs text-slate-500 font-medium">Internal Interview Plan</p>
        </div>

        <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
          <p className="px-3 py-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Outline</p>
          <a href="#overview" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors group">
            <Info className="w-4 h-4 text-slate-400 group-hover:text-indigo-600" />
            미팅 개요
          </a>
          
          <p className="px-3 py-2 pt-6 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Questionnaire</p>
          <a href="#cost" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
            비용 및 계약
          </a>
          <a href="#legal" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
            <div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
            데이터 및 법적 리스크
          </a>
          <a href="#continuity" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
            <div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
            연속성 대응
          </a>
          <a href="#technical" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
            <div className="w-1.5 h-1.5 rounded-full bg-slate-400"></div>
            기술적 상세
          </a>

          <p className="px-3 py-2 pt-6 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Strategy</p>
          <a href="#tips" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
            <ChevronRight className="w-4 h-4" />
            협상 전략 및 팁
          </a>
        </nav>

        <div className="p-4 border-t border-slate-100 bg-slate-50">
          <div className="flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-lg shadow-sm">
            <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-bold text-xs">JD</div>
            <div>
              <p className="text-xs font-bold text-slate-800">SAM Lead</p>
              <p className="text-[10px] text-slate-500">Project Manager</p>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col min-w-0">
        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white/80 px-6 backdrop-blur-md">
          <h2 className="text-sm font-semibold text-slate-800 truncate">
            KoDATA EW 리포트 API 도입 인터뷰 계획안
          </h2>
          <div className="flex items-center gap-3">
            <button className="p-2 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors">
              <Share2 className="w-4 h-4" />
            </button>
            <button 
              onClick={() => window.print()}
              className="flex items-center gap-2 px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-200"
            >
              <Printer className="w-4 h-4" />
              <span className="hidden sm:inline">PDF 출력</span>
            </button>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-4 sm:p-8 space-y-8">
          {children}
          
          <footer className="pt-12 pb-6 border-t border-slate-200 text-center">
            <p className="text-sm text-slate-400">© 2024 SAM Project - Internal Use Only</p>
          </footer>
        </div>
      </main>
    </div>
  );
};

export default Layout;