"use client";

import {
  Activity,
  AlertCircle,
  ArrowDownRight,
  ArrowRight,
  ArrowUpRight,
  BarChart3,
  Bell,
  Boxes,
  Building2,
  CalendarDays,
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  CircleDollarSign,
  ClipboardList,
  Clock3,
  CreditCard,
  Download,
  Ellipsis,
  ExternalLink,
  FileText,
  Filter,
  Heart,
  LayoutDashboard,
  LogOut,
  Menu,
  MessageCircle,
  Package,
  Plus,
  Search,
  Settings,
  ShieldCheck,
  ShoppingBag,
  ShoppingCart,
  SlidersHorizontal,
  Sparkles,
  Store,
  Tag,
  Truck,
  UserRound,
  UsersRound,
  WalletCards,
  X,
  Zap,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { useMemo, useState } from "react";
import type { FormEvent, ReactNode } from "react";

type Role = "admin" | "salon";
type AdminSection =
  | "dashboard"
  | "orders"
  | "products"
  | "customers"
  | "campaigns"
  | "stock"
  | "reports"
  | "settings";
type SalonSection = "home" | "catalog" | "orders" | "favorites" | "account";

type Product = {
  id: number;
  name: string;
  brand: string;
  category: string;
  price: number;
  oldPrice?: number;
  stock: number;
  sku: string;
  tone: string;
  accent: string;
  badge?: string;
  description: string;
};

type CartItem = { product: Product; quantity: number };

type NavItem = { id: AdminSection; label: string; icon: LucideIcon; count?: string };
type SalonNavItem = { id: SalonSection; label: string; icon: LucideIcon; count?: string };

const adminNav: NavItem[] = [
  { id: "dashboard", label: "Genel Bakış", icon: LayoutDashboard },
  { id: "orders", label: "Siparişler", icon: ClipboardList, count: "12" },
  { id: "products", label: "Ürünler", icon: Package },
  { id: "customers", label: "Müşteriler", icon: UsersRound },
  { id: "campaigns", label: "Kampanyalar", icon: Tag },
];

const managementNav: NavItem[] = [
  { id: "stock", label: "Stok Yönetimi", icon: Boxes },
  { id: "reports", label: "Raporlar", icon: BarChart3 },
  { id: "settings", label: "Ayarlar", icon: Settings },
];

const salonNav: SalonNavItem[] = [
  { id: "home", label: "Ana Sayfa", icon: LayoutDashboard },
  { id: "catalog", label: "Ürün Kataloğu", icon: ShoppingBag },
  { id: "orders", label: "Siparişlerim", icon: ClipboardList, count: "3" },
  { id: "favorites", label: "Favorilerim", icon: Heart },
  { id: "account", label: "Cari Hesabım", icon: WalletCards },
];

const products: Product[] = [
  {
    id: 1,
    name: "Majirel Permanent Color 7.0",
    brand: "L’Oréal Professionnel",
    category: "Saç Boyaları",
    price: 218,
    oldPrice: 246,
    stock: 128,
    sku: "LOR-MAJ-070",
    tone: "#e6b999",
    accent: "#9d5942",
    badge: "Çok Satan",
    description: "Kusursuz beyaz kapama ve zengin, kalıcı renk.",
  },
  {
    id: 2,
    name: "Blondor Freelights Oksidan 1L",
    brand: "Wella Professionals",
    category: "Oksidan",
    price: 349,
    oldPrice: 390,
    stock: 64,
    sku: "WEL-BLF-1000",
    tone: "#e8d5a8",
    accent: "#b48842",
    badge: "%11 Avantaj",
    description: "Açma işlemleri için kontrollü ve homojen performans.",
  },
  {
    id: 3,
    name: "Invigo Nutri-Enrich Şampuan",
    brand: "Wella Professionals",
    category: "Şampuan",
    price: 425,
    stock: 42,
    sku: "WEL-INV-250",
    tone: "#b7d8dc",
    accent: "#287887",
    description: "Kuru ve yıpranmış saçlar için besleyici bakım.",
  },
  {
    id: 4,
    name: "Metal Detox Maske 500ml",
    brand: "L’Oréal Professionnel",
    category: "Saç Bakım",
    price: 585,
    stock: 8,
    sku: "LOR-MDX-500",
    tone: "#c7b4e2",
    accent: "#7553a3",
    badge: "Son 10 adet",
    description: "Saç telini güçlendiren profesyonel bakım maskesi.",
  },
  {
    id: 5,
    name: "GHD Helios™ Profesyonel Fön Makinesi",
    brand: "GHD",
    category: "Elektrikli Aletler",
    price: 6_480,
    oldPrice: 7_250,
    stock: 17,
    sku: "GHD-HLS-001",
    tone: "#aeb9c7",
    accent: "#31465f",
    badge: "Yeni",
    description: "Salon kullanımı için güçlü, hafif ve sessiz teknoloji.",
  },
  {
    id: 6,
    name: "Sibel Boyun Bandı 100'lü",
    brand: "Sibel",
    category: "Tek Kullanımlık Ürünler",
    price: 128,
    stock: 360,
    sku: "SIB-NCK-100",
    tone: "#dde0e7",
    accent: "#596171",
    description: "Hijyenik ve pratik salon kullanımı için tek kullanımlık bant.",
  },
];

const orders = [
  { id: "SP-240318-081", customer: "Studio 34 Hair", amount: 8_420, status: "Hazırlanıyor", time: "Bugün, 09:42", color: "violet" },
  { id: "SP-240318-079", customer: "Mira Kuaför", amount: 2_185, status: "Onaylandı", time: "Bugün, 09:18", color: "blue" },
  { id: "SP-240317-068", customer: "Beyaz Salon", amount: 5_760, status: "Kargoda", time: "Dün, 16:27", color: "amber" },
  { id: "SP-240317-064", customer: "Atelier N°7", amount: 1_940, status: "Teslim Edildi", time: "Dün, 14:03", color: "emerald" },
];

const customers = [
  { name: "Studio 34 Hair", contact: "Derya Şahin", city: "İstanbul / Beşiktaş", orders: 24, balance: "₺18.450", status: "Aktif", initials: "S3", color: "purple" },
  { name: "Mira Kuaför", contact: "Mert Kaya", city: "İstanbul / Kadıköy", orders: 18, balance: "₺7.220", status: "Aktif", initials: "MK", color: "blue" },
  { name: "Atelier N°7", contact: "Selin Aras", city: "Ankara / Çankaya", orders: 15, balance: "₺0", status: "Aktif", initials: "A7", color: "gold" },
  { name: "Beyaz Salon", contact: "Bora Yılmaz", city: "İzmir / Alsancak", orders: 11, balance: "₺3.840", status: "Riskli", initials: "BS", color: "green" },
  { name: "Luna Hair Studio", contact: "Nazlı Akın", city: "Bursa / Nilüfer", orders: 9, balance: "₺1.210", status: "Aktif", initials: "LH", color: "rose" },
];

const formatPrice = (amount: number) =>
  `₺${new Intl.NumberFormat("tr-TR", { maximumFractionDigits: 0 }).format(amount)}`;

function Logo({ compact = false }: { compact?: boolean }) {
  return (
    <div className={`brand-mark ${compact ? "brand-mark-compact" : ""}`}>
      <span className="brand-glyph"><span /></span>
      {!compact && <span className="brand-copy"><strong>NUANCE</strong><small>PROFESSIONAL SUPPLY</small></span>}
    </div>
  );
}

function StatusPill({ status }: { status: string }) {
  const statusClass: Record<string, string> = {
    "Hazırlanıyor": "status-violet",
    "Onaylandı": "status-blue",
    "Kargoda": "status-amber",
    "Teslim Edildi": "status-emerald",
    "Yeni Sipariş": "status-blue",
    "İptal": "status-red",
    "Aktif": "status-emerald",
    "Riskli": "status-red",
  };
  return <span className={`status-pill ${statusClass[status] ?? "status-slate"}`}><i />{status}</span>;
}

function AdminSidebar({ section, onNavigate, onSalon, onLogin }: { section: AdminSection; onNavigate: (section: AdminSection) => void; onSalon: () => void; onLogin: () => void }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-inner">
        <div className="sidebar-logo"><Logo /></div>
        <div className="workspace-switcher">
          <div className="workspace-avatar"><Building2 size={15} /></div>
          <div><strong>Nuance Distribütör</strong><span>Yönetim paneli</span></div>
          <ChevronDown size={15} className="muted-icon" />
        </div>
        <nav className="side-nav" aria-label="Yönetim menüsü">
          <p className="nav-label">ÇALIŞMA ALANI</p>
          {adminNav.map((item) => (
            <button key={item.id} className={`nav-item ${section === item.id ? "active" : ""}`} onClick={() => onNavigate(item.id)}>
              <item.icon size={18} strokeWidth={1.9} /><span>{item.label}</span>{item.count && <em>{item.count}</em>}
            </button>
          ))}
          <p className="nav-label nav-label-spaced">YÖNETİM</p>
          {managementNav.map((item) => (
            <button key={item.id} className={`nav-item ${section === item.id ? "active" : ""}`} onClick={() => onNavigate(item.id)}>
              <item.icon size={18} strokeWidth={1.9} /><span>{item.label}</span>
            </button>
          ))}
        </nav>
        <div className="sidebar-bottom">
          <button className="salon-switch-card" onClick={onSalon}>
            <span className="salon-card-icon"><Store size={16} /></span>
            <span><strong>Salon görünümüne geç</strong><small>Test hesabını görüntüle</small></span>
            <ArrowRight size={16} />
          </button>
          <div className="sidebar-user">
            <div className="user-avatar avatar-navy">AD</div>
            <div className="sidebar-user-copy"><strong>Admin</strong><span>Genel Yönetici</span></div>
            <button className="icon-button ghost" aria-label="Oturum seçenekleri" onClick={onLogin}><Ellipsis size={18} /></button>
          </div>
        </div>
      </div>
    </aside>
  );
}

function SalonSidebar({ section, onNavigate, onAdmin, onLogin }: { section: SalonSection; onNavigate: (section: SalonSection) => void; onAdmin: () => void; onLogin: () => void }) {
  return (
    <aside className="sidebar salon-sidebar">
      <div className="sidebar-inner">
        <div className="sidebar-logo"><Logo /></div>
        <div className="salon-profile-card">
          <div className="salon-profile-top"><div className="user-avatar avatar-purple">S3</div><span className="online-dot" /></div>
          <strong>Studio 34 Hair</strong><span>Premium müşteri hesabı</span>
        </div>
        <nav className="side-nav" aria-label="Salon menüsü">
          <p className="nav-label">SALON PANELİ</p>
          {salonNav.map((item) => (
            <button key={item.id} className={`nav-item ${section === item.id ? "active" : ""}`} onClick={() => onNavigate(item.id)}>
              <item.icon size={18} strokeWidth={1.9} /><span>{item.label}</span>{item.count && <em>{item.count}</em>}
            </button>
          ))}
        </nav>
        <div className="sidebar-bottom">
          <div className="salon-help">
            <div className="help-icon"><MessageCircle size={17} /></div>
            <div><strong>Size nasıl yardımcı olabiliriz?</strong><span>Destek ekibine ulaşın</span></div>
            <ChevronRight size={15} />
          </div>
          <button className="switch-admin-link" onClick={onAdmin}><ArrowRight size={15} /> Yönetim paneline geç</button>
          <div className="sidebar-user">
            <div className="user-avatar avatar-purple">DS</div>
            <div className="sidebar-user-copy"><strong>Derya Şahin</strong><span>Salon yöneticisi</span></div>
            <button className="icon-button ghost" aria-label="Oturum seçenekleri" onClick={onLogin}><Ellipsis size={18} /></button>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ role, onLogin, onMobileMenu, onSalonCart, cartCount }: { role: Role; onLogin: () => void; onMobileMenu: () => void; onSalonCart?: () => void; cartCount?: number }) {
  return (
    <header className="topbar">
      <div className="topbar-left"><button className="mobile-menu icon-button" onClick={onMobileMenu} aria-label="Menüyü aç"><Menu size={20} /></button><div className="topbar-context"><span>{role === "admin" ? "Yönetim paneli" : "Studio 34 Hair"}</span><ChevronRight size={13} /><strong>{role === "admin" ? "Genel Bakış" : "Salon hesabı"}</strong></div></div>
      <div className="topbar-actions">
        <div className="global-search"><Search size={17} /><input aria-label="Ara" placeholder={role === "admin" ? "Sipariş, ürün veya müşteri ara..." : "Ürünlerde ara..."} /><kbd>⌘ K</kbd></div>
        {role === "salon" && <button className="top-cart icon-button" onClick={onSalonCart} aria-label="Sepeti aç"><ShoppingCart size={20} /><span>{cartCount}</span></button>}
        <button className="notification-button icon-button" aria-label="Bildirimler"><Bell size={19} /><i /></button>
        <div className="top-divider" />
        <button className="top-user" onClick={onLogin}><span className={`user-avatar ${role === "admin" ? "avatar-navy" : "avatar-purple"}`}>{role === "admin" ? "AD" : "DS"}</span><span className="top-user-text"><strong>{role === "admin" ? "Admin" : "Derya Şahin"}</strong><small>{role === "admin" ? "Genel Yönetici" : "Studio 34 Hair"}</small></span><ChevronDown size={15} /></button>
      </div>
    </header>
  );
}

function PageHeading({ eyebrow, title, description, action, secondaryAction }: { eyebrow?: string; title: string; description?: string; action?: ReactNode; secondaryAction?: ReactNode }) {
  return <div className="page-heading"><div><div className="eyebrow">{eyebrow}</div><h1>{title}</h1>{description && <p>{description}</p>}</div><div className="heading-actions">{secondaryAction}{action}</div></div>;
}

function KpiCard({ label, value, change, trend, icon: Icon, iconClass, note }: { label: string; value: string; change: string; trend: "up" | "down"; icon: LucideIcon; iconClass: string; note?: string }) {
  return <div className="kpi-card"><div className="kpi-top"><span>{label}</span><span className={`kpi-icon ${iconClass}`}><Icon size={18} /></span></div><div className="kpi-value">{value}</div><div className="kpi-footer"><span className={`trend ${trend}`}><span>{trend === "up" ? "↗" : "↘"}</span> {change}</span><span className="kpi-note">{note ?? "geçen aya göre"}</span></div></div>;
}

function SalesChart() {
  return <div className="chart-card panel-card"><div className="panel-heading"><div><h2>Satış performansı</h2><p>Son 7 günün sipariş ve ciro özeti</p></div><button className="select-button">Bu hafta <ChevronDown size={15} /></button></div><div className="chart-legend"><span><i className="legend-dot navy-dot" /> Ciro</span><span><i className="legend-dot gold-dot" /> Siparişler</span></div><div className="sales-chart"><div className="chart-y-labels"><span>₺20K</span><span>₺15K</span><span>₺10K</span><span>₺5K</span><span>₺0</span></div><div className="chart-plot"><div className="chart-grid"><i /><i /><i /><i /><i /></div><svg viewBox="0 0 700 220" preserveAspectRatio="none" role="img" aria-label="Haftalık satış grafiği"><defs><linearGradient id="salesFill" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#293b78" stopOpacity=".2" /><stop offset="100%" stopColor="#293b78" stopOpacity="0" /></linearGradient></defs><path d="M0 160 C40 153 58 145 92 149 S140 118 184 128 S220 152 263 135 S310 104 350 119 S390 96 439 104 S482 134 520 115 S565 74 609 87 S665 62 700 50 L700 220 L0 220 Z" fill="url(#salesFill)" /><path d="M0 160 C40 153 58 145 92 149 S140 118 184 128 S220 152 263 135 S310 104 350 119 S390 96 439 104 S482 134 520 115 S565 74 609 87 S665 62 700 50" fill="none" stroke="#293b78" strokeWidth="3" strokeLinecap="round" /><path d="M0 183 C42 177 60 180 92 179 S140 165 184 171 S220 181 263 169 S310 154 350 164 S390 149 439 155 S482 173 520 160 S565 140 609 148 S665 134 700 130" fill="none" stroke="#c5a466" strokeWidth="2.5" strokeDasharray="5 5" strokeLinecap="round" /><circle cx="609" cy="87" r="5" fill="#fff" stroke="#293b78" strokeWidth="3" /><circle cx="609" cy="148" r="4" fill="#fff" stroke="#c5a466" strokeWidth="2.5" /></svg><div className="chart-tooltip"><strong>₺17.840</strong><span>Salı, 12 Mart</span></div><div className="chart-x-labels"><span>Pzt</span><span>Sal</span><span>Çar</span><span>Per</span><span>Cum</span><span>Cmt</span><span>Paz</span></div></div></div></div>;
}

function RecentOrders() {
  return <div className="panel-card recent-orders"><div className="panel-heading"><div><h2>Son siparişler</h2><p>Son işlemler ve güncel durumlar</p></div><button className="text-button">Tümünü gör <ArrowRight size={15} /></button></div><div className="orders-table-wrap"><table className="data-table"><thead><tr><th>SİPARİŞ NO</th><th>MÜŞTERİ</th><th>TUTAR</th><th>DURUM</th><th>TARİH</th><th /></tr></thead><tbody>{orders.map((order) => <tr key={order.id}><td><strong className="order-number">{order.id}</strong></td><td><div className="customer-cell"><span className={`mini-avatar ${order.color}`}>{order.customer.split(" ").map((word) => word[0]).join("").slice(0, 2)}</span><span>{order.customer}</span></div></td><td><strong>{formatPrice(order.amount)}</strong></td><td><StatusPill status={order.status} /></td><td><span className="muted-text">{order.time}</span></td><td><button className="table-more" aria-label="Sipariş seçenekleri"><Ellipsis size={18} /></button></td></tr>)}</tbody></table></div></div>;
}

function TopProducts() {
  return <div className="panel-card top-products"><div className="panel-heading"><div><h2>En çok sipariş edilenler</h2><p>Bu ayın ürün performansı</p></div><button className="table-more" aria-label="Daha fazla"><Ellipsis size={18} /></button></div><div className="product-ranking">{products.slice(0, 4).map((product, index) => <div className="ranking-item" key={product.id}><span className="rank-number">0{index + 1}</span><div className="tiny-product-visual" style={{ background: `linear-gradient(145deg, ${product.tone}, ${product.accent})` }}><span>{product.category === "Elektrikli Aletler" ? "✦" : "✧"}</span></div><div className="ranking-copy"><strong>{product.name.split(" ").slice(0, 3).join(" ")}</strong><span>{product.brand}</span></div><div className="ranking-value"><strong>{[184, 142, 97, 74][index]}</strong><span>adet</span></div></div>)}</div><button className="full-width-link">Ürün analitiğine git <ArrowUpRight size={15} /></button></div>;
}

function Dashboard({ onNavigate }: { onNavigate: (section: AdminSection) => void }) {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="PAZARTESİ, 18 MART 2024" title="Günaydın, Admin 👋" description="İşletmenizin bugünkü özeti ve operasyon durumu." action={<button className="primary-button"><Download size={16} /> Raporu indir</button>} /><div className="dashboard-banner"><div className="banner-glow" /><div className="banner-content"><span className="banner-kicker"><Sparkles size={14} /> HAFTALIK ÖZET</span><h2>Bu hafta işlerin oldukça iyi gidiyor.</h2><p>Geçen haftaya göre ciron <strong>%18,4</strong> arttı. Harika performans!</p></div><div className="banner-stat"><span>Haftalık ciro</span><strong>₺84.620</strong><small><ArrowUpRight size={13} /> %18,4</small></div><div className="banner-art"><span className="art-ring ring-one" /><span className="art-ring ring-two" /><span className="art-shape">N</span></div></div><div className="kpi-grid"><KpiCard label="Günlük sipariş" value="38" change="%12,5" trend="up" icon={ClipboardList} iconClass="kpi-blue" note="düne göre" /><KpiCard label="Bekleyen sipariş" value="12" change="%8,2" trend="down" icon={Clock3} iconClass="kpi-amber" note="düne göre" /><KpiCard label="Tamamlanan" value="26" change="%24,8" trend="up" icon={Check} iconClass="kpi-green" note="düne göre" /><KpiCard label="Toplam satış" value="₺12.480" change="%16,3" trend="up" icon={CircleDollarSign} iconClass="kpi-purple" note="düne göre" /></div><div className="dashboard-grid"><SalesChart /><TopProducts /></div><div className="dashboard-grid lower-grid"><RecentOrders /><div className="panel-card active-customers"><div className="panel-heading"><div><h2>Aktif müşteriler</h2><p>Son 30 günde sipariş verenler</p></div><button className="table-more" aria-label="Daha fazla"><Ellipsis size={18} /></button></div><div className="active-customer-total"><strong>284</strong><span><ArrowUpRight size={14} /> %6,8</span><small>geçen aya göre</small></div><div className="customer-bars"><div><span>İstanbul</span><i><b style={{ width: "88%" }} /></i><strong>128</strong></div><div><span>Ankara</span><i><b style={{ width: "57%" }} /></i><strong>74</strong></div><div><span>İzmir</span><i><b style={{ width: "43%" }} /></i><strong>52</strong></div><div><span>Diğer</span><i><b style={{ width: "25%" }} /></i><strong>30</strong></div></div><button className="full-width-link" onClick={() => onNavigate("customers")}>Müşteri listesine git <ArrowUpRight size={15} /></button></div></div></div></div>;
}

function Toolbar({ searchPlaceholder, onSearch, children }: { searchPlaceholder: string; onSearch?: (value: string) => void; children?: ReactNode }) {
  return <div className="list-toolbar"><div className="list-search"><Search size={17} /><input placeholder={searchPlaceholder} onChange={(event) => onSearch?.(event.target.value)} /></div><div className="toolbar-actions"><button className="outline-button"><Filter size={16} /> Filtrele</button>{children}</div></div>;
}

function OrdersView() {
  const [filter, setFilter] = useState("Tümü");
  const filteredOrders = filter === "Tümü" ? orders : orders.filter((order) => order.status === filter);
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="OPERASYON" title="Siparişler" description="Müşterilerinizin tüm siparişlerini tek yerden takip edin." action={<button className="primary-button"><Plus size={17} /> Yeni sipariş</button>} /><div className="mini-stat-row"><div><span>Toplam sipariş</span><strong>1.248</strong><small className="positive"><ArrowUpRight size={13} /> %14,2</small></div><div><span>Onay bekleyen</span><strong>12</strong><small className="warning-text">Aksiyon bekliyor</small></div><div><span>Hazırlanan</span><strong>24</strong><small>bugün</small></div><div><span>Bu ay ciro</span><strong>₺286.450</strong><small className="positive"><ArrowUpRight size={13} /> %18,4</small></div></div><div className="panel-card list-panel"><div className="list-panel-header"><div><h2>Tüm siparişler</h2><p>1.248 siparişten 4 tanesi gösteriliyor</p></div><div className="segmented-control">{["Tümü", "Yeni Sipariş", "Hazırlanıyor", "Kargoda"].map((item) => <button key={item} className={filter === item ? "selected" : ""} onClick={() => setFilter(item)}>{item}</button>)}</div></div><Toolbar searchPlaceholder="Sipariş no veya müşteri ara..."><button className="outline-button"><Download size={16} /> Dışa aktar</button></Toolbar><div className="orders-table-wrap"><table className="data-table spacious"><thead><tr><th>SİPARİŞ NO</th><th>MÜŞTERİ</th><th>ÜRÜN</th><th>TUTAR</th><th>DURUM</th><th>SİPARİŞ TARİHİ</th><th /></tr></thead><tbody>{filteredOrders.map((order) => <tr key={order.id}><td><strong className="order-number">{order.id}</strong><span className="cell-subtext">B2B sipariş</span></td><td><div className="customer-cell"><span className={`mini-avatar ${order.color}`}>{order.customer.split(" ").map((word) => word[0]).join("").slice(0, 2)}</span><span>{order.customer}</span></div></td><td><span>6 ürün</span><span className="cell-subtext">+ 2 diğer ürün</span></td><td><strong>{formatPrice(order.amount)}</strong></td><td><StatusPill status={order.status} /></td><td><span>{order.time}</span></td><td><button className="table-more" aria-label="Sipariş seçenekleri"><Ellipsis size={18} /></button></td></tr>)}</tbody></table></div><div className="table-footer"><span>1–4 / 1.248 sipariş</span><div><button className="pagination-button"><ChevronLeft size={16} /></button><button className="pagination-button active">1</button><button className="pagination-button">2</button><button className="pagination-button">3</button><span>...</span><button className="pagination-button"><ChevronRight size={16} /></button></div></div></div></div></div>;
}

function ProductVisual({ product, large = false }: { product: Product; large?: boolean }) {
  return <div className={`product-visual ${large ? "large" : ""}`} style={{ background: `radial-gradient(circle at 75% 20%, rgba(255,255,255,.6), transparent 30%), linear-gradient(135deg, ${product.tone}, ${product.accent})` }}><span className="visual-orb orb-a" /><span className="visual-orb orb-b" /><div className="bottle-visual"><span>{product.brand.split(" ")[0].slice(0, 4).toUpperCase()}</span><b>{product.category === "Elektrikli Aletler" ? "✦" : "N"}</b></div><span className="visual-category">{product.category}</span></div>;
}

function ProductsView({ onCatalog }: { onCatalog: () => void }) {
  const [query, setQuery] = useState("");
  const shownProducts = products.filter((product) => `${product.name} ${product.brand}`.toLowerCase().includes(query.toLowerCase()));
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="KATALOG YÖNETİMİ" title="Ürünler" description="Kataloğunuzdaki ürünleri, fiyatları ve stokları yönetin." secondaryAction={<button className="outline-button"><Download size={16} /> Ürünleri dışa aktar</button>} action={<button className="primary-button"><Plus size={17} /> Ürün ekle</button>} /><div className="category-strip"><button className="category-chip selected">Tüm ürünler <span>248</span></button><button className="category-chip">Saç Boyaları <span>72</span></button><button className="category-chip">Saç Bakım <span>54</span></button><button className="category-chip">Elektrikli Aletler <span>31</span></button><button className="category-chip">Oksidan <span>26</span></button><button className="category-chip">Diğer <span>65</span></button></div><div className="panel-card list-panel"><Toolbar searchPlaceholder="Ürün adı, marka veya SKU ara..." onSearch={setQuery}><button className="view-toggle active"><SlidersHorizontal size={16} /></button><button className="view-toggle"><BarChart3 size={16} /></button></Toolbar><div className="admin-product-grid">{shownProducts.map((product) => <div className="admin-product-card" key={product.id}><div className="admin-card-top"><ProductVisual product={product} /><button className="card-more" aria-label="Ürün seçenekleri"><Ellipsis size={18} /></button></div><div className="admin-product-copy"><div className="product-brand">{product.brand}</div><h3>{product.name}</h3><span className="sku">SKU: {product.sku}</span><div className="admin-product-meta"><div><small>Satış fiyatı</small><strong>{formatPrice(product.price)}</strong></div><div><small>Stok</small><strong className={product.stock < 15 ? "stock-low" : "stock-good"}>{product.stock} <span>adet</span></strong></div></div><div className="product-card-actions"><button className="outline-button small">Düzenle</button><button className="text-button" onClick={onCatalog}>Katalogda gör <ArrowRight size={14} /></button></div></div></div>)}</div></div></div></div>;
}

function CustomersView() {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="MÜŞTERİ İLİŞKİLERİ" title="Müşteriler" description="Salon hesaplarını, cari durumlarını ve sipariş geçmişini yönetin." secondaryAction={<button className="outline-button"><Download size={16} /> Dışa aktar</button>} action={<button className="primary-button"><Plus size={17} /> Müşteri ekle</button>} /><div className="mini-stat-row customer-stats"><div><span>Aktif müşteri</span><strong>284</strong><small className="positive"><ArrowUpRight size={13} /> %6,8</small></div><div><span>Bu ay yeni</span><strong>18</strong><small>geçen ay 12</small></div><div><span>Toplam cari</span><strong>₺84.620</strong><small className="warning-text">12 hesapta bakiye</small></div></div><div className="panel-card list-panel"><div className="list-panel-header"><div><h2>Salon hesapları</h2><p>284 aktif müşteriden en son etkileşimde bulunanlar</p></div><button className="outline-button"><SlidersHorizontal size={16} /> Sütunlar</button></div><Toolbar searchPlaceholder="Salon adı veya yetkili kişi ara..."><button className="outline-button"><Filter size={16} /> Duruma göre</button></Toolbar><div className="orders-table-wrap"><table className="data-table spacious"><thead><tr><th>SALON</th><th>YETKİLİ KİŞİ</th><th>LOKASYON</th><th>SİPARİŞ</th><th>CARİ BAKİYE</th><th>DURUM</th><th /></tr></thead><tbody>{customers.map((customer) => <tr key={customer.name}><td><div className="customer-cell"><span className={`mini-avatar ${customer.color}`}>{customer.initials}</span><strong>{customer.name}</strong></div></td><td>{customer.contact}</td><td><span className="muted-text">{customer.city}</span></td><td><strong>{customer.orders}</strong><span className="cell-subtext">sipariş</span></td><td><strong>{customer.balance}</strong></td><td><StatusPill status={customer.status} /></td><td><button className="table-more" aria-label="Müşteri seçenekleri"><Ellipsis size={18} /></button></td></tr>)}</tbody></table></div></div></div></div>;
}

function StockView() {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="OPERASYON" title="Stok yönetimi" description="Depo seviyelerini ve kritik stokları gerçek zamanlı takip edin." action={<button className="primary-button"><Plus size={17} /> Stok girişi</button>} /><div className="stock-health"><div className="stock-health-copy"><div className="stock-health-icon"><Activity size={20} /></div><div><span>Genel stok sağlığı</span><strong>İyi durumda</strong><p>248 ürünün 224'ü yeterli stok seviyesinde.</p></div></div><div className="stock-health-meter"><strong>%90,3</strong><div><i style={{ width: "90.3%" }} /></div><span>Son güncelleme: 5 dk önce</span></div></div><div className="mini-stat-row stock-stats"><div><span>Toplam ürün</span><strong>248</strong><small className="positive">+12 bu ay</small></div><div><span>Kritik stok</span><strong className="stock-low">8</strong><small className="warning-text">Acil aksiyon</small></div><div><span>Stok değeri</span><strong>₺1,28M</strong><small>alış fiyatı</small></div><div><span>Bekleyen giriş</span><strong>3</strong><small>sevkiyat</small></div></div><div className="panel-card list-panel"><div className="list-panel-header"><div><h2>Kritik stok takibi</h2><p>Stok seviyesi minimum eşiğin altında olan ürünler</p></div><button className="outline-button"><Download size={16} /> Raporu indir</button></div><div className="stock-list">{[products[3], products[1], products[4], products[2]].map((product, index) => <div className="stock-row" key={product.id}><ProductVisual product={product} /><div className="stock-product-name"><strong>{product.name}</strong><span>{product.brand} · {product.sku}</span></div><div className="stock-level"><span>Mevcut stok <strong className={product.stock < 15 ? "stock-low" : ""}>{product.stock} adet</strong></span><div><i style={{ width: `${Math.max(17, Math.min(86, product.stock / 1.5))}%` }} /></div></div><span className={index < 2 ? "stock-alert" : "stock-ok"}>{index < 2 ? "Yenileme gerekli" : "Takipte"}</span><button className="outline-button small">Sipariş ver</button></div>)}</div></div></div></div>;
}

function CampaignsView() {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="BÜYÜME" title="Kampanyalar" description="Salonlarınıza özel fırsatları oluşturun ve performansını ölçün." action={<button className="primary-button"><Plus size={17} /> Kampanya oluştur</button>} /><div className="campaign-grid"><div className="campaign-card campaign-featured"><div><span className="campaign-status">● Aktif kampanya</span><h2>Renk Uzmanı<br /><em>Avantaj Paketi</em></h2><p>3 adet Majirel alan salonlara özel oksidan fırsatı.</p><button className="light-button">Kampanyayı incele <ArrowRight size={15} /></button></div><div className="campaign-circle">%15</div></div><div className="campaign-card campaign-gold"><span className="campaign-status">● Taslak</span><h3>Yaz Bakım<br />Günleri</h3><p>Haziran ayında aktif olacak kampanyanın detaylarını tamamlayın.</p><button className="outline-button small">Düzenle <ArrowRight size={14} /></button><div className="campaign-line" /></div><div className="campaign-card campaign-light"><span className="campaign-status">● Tamamlandı</span><h3>İlk Sipariş<br />Avantajı</h3><p>Yeni salonların ilk siparişlerinde %10 indirim.</p><span className="campaign-result"><strong>₺42.180</strong> ek ciro</span></div></div><div className="panel-card campaign-table"><div className="panel-heading"><div><h2>Kampanya performansı</h2><p>Aktif kampanyalarınızın son 30 günlük özeti</p></div><button className="text-button">Tüm rapor <ArrowRight size={15} /></button></div><div className="performance-row"><span className="performance-icon purple-bg"><Tag size={17} /></span><div><strong>Renk Uzmanı Avantaj Paketi</strong><small>32 salonda aktif</small></div><div className="performance-bar"><i style={{ width: "74%" }} /></div><strong>₺58.240</strong><span className="positive">+%24</span></div><div className="performance-row"><span className="performance-icon blue-bg"><Sparkles size={17} /></span><div><strong>Profesyonel Bakım Haftası</strong><small>18 salonda aktif</small></div><div className="performance-bar"><i style={{ width: "48%" }} /></div><strong>₺24.650</strong><span className="positive">+%12</span></div></div></div></div>;
}

function ReportsView() {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="ANALİTİK" title="Raporlar" description="İşletmenizin ticari performansını anlamlı içgörülere dönüştürün." secondaryAction={<button className="outline-button"><CalendarDays size={16} /> 01 Mar – 18 Mar</button>} action={<button className="primary-button"><Download size={16} /> Rapor oluştur</button>} /><div className="report-cards"><div className="report-highlight"><span className="report-icon"><BarChart3 size={19} /></span><span>Toplam satış</span><strong>₺286.450</strong><small><ArrowUpRight size={14} /> %18,4 geçen aya göre</small><div className="mini-line-chart"><i /><i /><i /><i /><i /><i /><i /></div></div><div className="report-highlight"><span className="report-icon report-blue"><UsersRound size={19} /></span><span>Ortalama sepet</span><strong>₺2.348</strong><small><ArrowUpRight size={14} /> %8,6 geçen aya göre</small><div className="mini-line-chart blue-line"><i /><i /><i /><i /><i /><i /><i /></div></div><div className="report-highlight"><span className="report-icon report-green"><Zap size={19} /></span><span>Sipariş dönüşümü</span><strong>%68,2</strong><small><ArrowUpRight size={14} /> %4,2 geçen aya göre</small><div className="mini-line-chart green-line"><i /><i /><i /><i /><i /><i /><i /></div></div></div><div className="dashboard-grid report-grid"><SalesChart /><div className="panel-card category-report"><div className="panel-heading"><div><h2>Kategori dağılımı</h2><p>Ciroya göre ürün kategorileri</p></div></div><div className="donut-wrap"><div className="donut-chart"><div><strong>%38</strong><span>Saç boyaları</span></div></div><div className="donut-legend"><span><i className="dot-purple" /> Saç boyaları <b>%38</b></span><span><i className="dot-gold" /> Saç bakım <b>%27</b></span><span><i className="dot-blue" /> Oksidan <b>%19</b></span><span><i className="dot-slate" /> Diğer <b>%16</b></span></div></div></div></div></div></div>;
}

function SettingsView() {
  return <div className="content-scroll"><div className="content-inner"><PageHeading eyebrow="SİSTEM" title="Ayarlar" description="Nuance hesabınızı ve operasyon tercihlerinizi yönetin." action={<button className="primary-button"><Check size={16} /> Değişiklikleri kaydet</button>} /><div className="settings-layout"><div className="settings-menu"><button className="selected"><Building2 size={17} /> İşletme bilgileri</button><button><ShieldCheck size={17} /> Kullanıcılar ve roller</button><button><CreditCard size={17} /> Ödeme ve faturalama</button><button><Bell size={17} /> Bildirim tercihleri</button><button><Activity size={17} /> Entegrasyonlar</button></div><div className="panel-card settings-panel"><div className="panel-heading"><div><h2>İşletme bilgileri</h2><p>Distribütör hesabınızın temel bilgileri</p></div><span className="settings-secure"><ShieldCheck size={15} /> Güvenli hesap</span></div><div className="settings-form"><label>İşletme adı<input value="Nuance Profesyonel Ürünler" readOnly /></label><label>Vergi numarası<input value="1234567890" readOnly /></label><label className="span-two">Adres<input value="Merkez Mah. Profesyoneller Cad. No:18, İstanbul" readOnly /></label><label>Destek e-posta<input value="destek@nuancepro.com" readOnly /></label><label>Telefon<input value="+90 212 555 34 34" readOnly /></label></div><div className="integration-note"><span><Zap size={17} /></span><div><strong>Geleceğe hazır altyapı</strong><p>WhatsApp bildirimleri, e-fatura ve online ödeme entegrasyonlarınızı buradan bağlayabilirsiniz.</p></div><ArrowRight size={17} /></div></div></div></div></div>;
}

function AdminView({ section, onNavigate, onSalon }: { section: AdminSection; onNavigate: (section: AdminSection) => void; onSalon: () => void }) {
  switch (section) {
    case "orders": return <OrdersView />;
    case "products": return <ProductsView onCatalog={onSalon} />;
    case "customers": return <CustomersView />;
    case "campaigns": return <CampaignsView />;
    case "stock": return <StockView />;
    case "reports": return <ReportsView />;
    case "settings": return <SettingsView />;
    default: return <Dashboard onNavigate={onNavigate} />;
  }
}

function CatalogProductCard({ product, favorite, onFavorite, quantity, onQuantity, onAdd }: { product: Product; favorite: boolean; onFavorite: () => void; quantity: number; onQuantity: (quantity: number) => void; onAdd: () => void }) {
  return <article className="catalog-product-card"><div className="catalog-visual-wrap"><ProductVisual product={product} large /><button className={`favorite-button ${favorite ? "liked" : ""}`} onClick={onFavorite} aria-label={favorite ? "Favorilerden çıkar" : "Favorilere ekle"}>{<Heart size={18} fill={favorite ? "currentColor" : "none"} />}</button>{product.badge && <span className="product-badge">{product.badge}</span>}</div><div className="catalog-card-content"><span className="catalog-brand">{product.brand}</span><h3>{product.name}</h3><p>{product.description}</p><div className="catalog-price-row"><div><small>Size özel fiyat</small><strong>{formatPrice(product.price)}</strong>{product.oldPrice && <del>{formatPrice(product.oldPrice)}</del>}</div><span className={product.stock < 15 ? "stock-warning" : "stock-available"}>{product.stock < 15 ? "Son stok" : "Stokta"}</span></div><div className="catalog-buy-row"><div className="quantity-control"><button onClick={() => onQuantity(Math.max(1, quantity - 1))} aria-label="Adedi azalt">−</button><strong>{quantity}</strong><button onClick={() => onQuantity(quantity + 1)} aria-label="Adedi artır">+</button></div><button className="add-cart-button" onClick={onAdd}><ShoppingCart size={17} /> Sepete ekle</button></div></div></article>;
}

function SalonHome({ onCatalog, onRepeat, onOrder }: { onCatalog: () => void; onRepeat: () => void; onOrder: () => void }) {
  return <div className="content-scroll salon-content"><div className="content-inner"><div className="salon-welcome"><div><span className="eyebrow">18 MART 2024, PAZARTESİ</span><h1>Hoş geldin Derya <span>✦</span></h1><p>Studio 34 Hair için bugün neler hazırlayalım?</p></div><button className="primary-button" onClick={onCatalog}><ShoppingBag size={17} /> Alışverişe başla</button></div><div className="salon-alert"><div className="alert-icon"><Zap size={18} /></div><div><strong>Size özel fırsat: Renk Uzmanı Avantaj Paketi</strong><span>3 adet Majirel alımında oksidanlarda %15 indirim kazanın.</span></div><button className="text-button">İncele <ArrowRight size={15} /></button><X size={16} className="dismiss-alert" /></div><div className="salon-home-grid"><div className="repeat-card"><div className="repeat-copy"><span className="card-overline"><Clock3 size={14} /> HIZLI SİPARİŞ</span><h2>Geçen hafta<br />aldıklarını tekrar sipariş et</h2><p>Son siparişindeki ürünleri tek tıkla sepetine ekle.</p><button className="dark-button" onClick={onRepeat}>Tekrar sipariş ver <ArrowRight size={15} /></button></div><div className="repeat-products"><div className="repeat-stack stack-back"><span>W</span></div><div className="repeat-stack stack-middle"><span>L</span></div><div className="repeat-stack stack-front"><span>N</span></div><span className="plus-more">+4</span></div></div><div className="last-order-card panel-card"><div className="panel-heading"><div><span className="card-overline">SON SİPARİŞ</span><h2>#SP-240311-042</h2></div><StatusPill status="Teslim Edildi" /></div><span className="order-date">11 Mart 2024 · 7 ürün</span><div className="last-order-price"><strong>₺4.860</strong><span>Toplam tutar</span></div><div className="order-progress"><span className="done"><i><Check size={11} /></i><em>Sipariş</em></span><span className="done"><i><Check size={11} /></i><em>Hazırlandı</em></span><span className="done"><i><Check size={11} /></i><em>Kargoda</em></span><span className="done"><i><Check size={11} /></i><em>Teslim</em></span></div><button className="outline-button full-button" onClick={onOrder}>Sipariş detayını gör <ArrowRight size={15} /></button></div></div><div className="salon-section-heading"><div><span className="eyebrow">SİZİN İÇİN</span><h2>Favori ürünleriniz</h2></div><button className="text-button" onClick={onCatalog}>Kataloğu görüntüle <ArrowRight size={15} /></button></div><div className="favorite-mini-grid">{products.slice(0, 4).map((product) => <div className="favorite-mini" key={product.id}><ProductVisual product={product} /><div><span>{product.brand}</span><strong>{product.name.split(" ").slice(0, 4).join(" ")}</strong><b>{formatPrice(product.price)}</b></div><button className="plus-button" onClick={onCatalog} aria-label="Kataloğa git"><Plus size={17} /></button></div>)}</div></div></div>;
}

function CatalogView({ favorites, onFavorite, quantities, onQuantity, onAdd, onCart }: { favorites: number[]; onFavorite: (id: number) => void; quantities: Record<number, number>; onQuantity: (id: number, quantity: number) => void; onAdd: (product: Product) => void; onCart: () => void }) {
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("Tüm kategoriler");
  const [brand, setBrand] = useState("Tüm markalar");
  const filteredProducts = products.filter((product) => (category === "Tüm kategoriler" || product.category === category) && (brand === "Tüm markalar" || product.brand === brand) && `${product.name} ${product.brand}`.toLowerCase().includes(query.toLowerCase()));
  const categories = ["Tüm kategoriler", "Saç Boyaları", "Oksidan", "Şampuan", "Saç Bakım", "Elektrikli Aletler", "Tek Kullanımlık Ürünler"];
  return <div className="content-scroll salon-content"><div className="content-inner"><PageHeading eyebrow="PROFESYONEL KATALOG" title="Ürün kataloğu" description="Salonunuza özel fiyatlarla 248 ürünü keşfedin." action={<button className="cart-summary-button" onClick={onCart}><ShoppingCart size={18} /><span>Sepetim</span><b>4 ürün</b><ChevronRight size={16} /></button>} /><div className="catalog-toolbar"><div className="catalog-search"><Search size={18} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Ürün veya marka ara..." /><kbd>⌘ K</kbd></div><div className="filter-selects"><select value={category} onChange={(event) => setCategory(event.target.value)} aria-label="Kategori filtrele">{categories.map((item) => <option key={item}>{item}</option>)}</select><select value={brand} onChange={(event) => setBrand(event.target.value)} aria-label="Marka filtrele"><option>Tüm markalar</option><option>L’Oréal Professionnel</option><option>Wella Professionals</option><option>GHD</option><option>Sibel</option></select><button className="outline-button"><SlidersHorizontal size={16} /> Filtreler</button></div></div><div className="catalog-header-row"><span><strong>{filteredProducts.length}</strong> ürün listeleniyor</span><button className="sort-button">Önerilen sıralama <ChevronDown size={15} /></button></div><div className="catalog-grid">{filteredProducts.map((product) => <CatalogProductCard key={product.id} product={product} favorite={favorites.includes(product.id)} onFavorite={() => onFavorite(product.id)} quantity={quantities[product.id] ?? 1} onQuantity={(quantity) => onQuantity(product.id, quantity)} onAdd={() => onAdd(product)} />)}</div></div></div>;
}

function SalonOrdersView() {
  return <div className="content-scroll salon-content"><div className="content-inner"><PageHeading eyebrow="SİPARİŞ GEÇMİŞİ" title="Siparişlerim" description="Studio 34 Hair hesabınızın tüm siparişleri." action={<button className="primary-button"><Plus size={17} /> Yeni sipariş</button>} /><div className="mini-stat-row salon-order-stats"><div><span>Toplam sipariş</span><strong>42</strong><small className="positive">Bu yıl</small></div><div><span>Yolda</span><strong>1</strong><small>Tahmini 2 gün</small></div><div><span>Teslim edilen</span><strong>38</strong><small className="positive">%90 başarı</small></div><div><span>Toplam harcama</span><strong>₺84.620</strong><small>2024</small></div></div><div className="panel-card list-panel"><div className="list-panel-header"><div><h2>Sipariş geçmişi</h2><p>Studio 34 Hair için verilen siparişler</p></div><button className="outline-button"><Download size={16} /> Ekstre indir</button></div><div className="orders-table-wrap"><table className="data-table spacious"><thead><tr><th>SİPARİŞ NO</th><th>TARİH</th><th>ÜRÜNLER</th><th>TUTAR</th><th>DURUM</th><th /></tr></thead><tbody>{[{ id: "SP-240311-042", date: "11 Mar 2024", products: "7 ürün", amount: 4860, status: "Teslim Edildi" }, { id: "SP-240304-038", date: "04 Mar 2024", products: "12 ürün", amount: 7820, status: "Teslim Edildi" }, { id: "SP-240226-031", date: "26 Şub 2024", products: "5 ürün", amount: 2185, status: "Teslim Edildi" }, { id: "SP-240219-025", date: "19 Şub 2024", products: "9 ürün", amount: 6240, status: "Kargoda" }].map((order) => <tr key={order.id}><td><strong className="order-number">{order.id}</strong></td><td>{order.date}</td><td className="muted-text">{order.products}</td><td><strong>{formatPrice(order.amount)}</strong></td><td><StatusPill status={order.status} /></td><td><button className="text-button">Detay <ArrowRight size={14} /></button></td></tr>)}</tbody></table></div></div></div></div>;
}

function AccountView() {
  return <div className="content-scroll salon-content"><div className="content-inner"><PageHeading eyebrow="CARİ HESAP" title="Hesabım" description="Ödeme hareketleri, bakiye ve salon bilgilerinizi görüntüleyin." action={<button className="outline-button"><Download size={16} /> Ekstre indir</button>} /><div className="account-balance-card"><div><span>Güncel cari bakiye</span><strong>₺7.840,00</strong><small>Son ödeme tarihi: 25 Mart 2024</small></div><div className="balance-visual"><span /><span /><span /><span /><span /><span /></div><button className="light-button">Ödeme geçmişi <ArrowRight size={15} /></button></div><div className="account-grid"><div className="panel-card"><div className="panel-heading"><div><h2>Hesap özeti</h2><p>Son 6 aylık hareket</p></div></div><div className="account-summary"><div><span>Tanımlı kredi limiti</span><strong>₺25.000</strong></div><div><span>Kullanılabilir limit</span><strong>₺17.160</strong></div><div><span>Ödenmemiş fatura</span><strong>3</strong></div></div><div className="credit-progress"><div><span>Kredi kullanımı</span><strong>%31,4</strong></div><i><b /></i></div></div><div className="panel-card contact-card"><div className="panel-heading"><div><h2>Salon bilgileri</h2><p>Hesap ve teslimat adresi</p></div><button className="table-more"><Ellipsis size={18} /></button></div><div className="contact-line"><Building2 size={17} /><span><strong>Studio 34 Hair</strong>Merkez Mah. Beşiktaş / İstanbul</span></div><div className="contact-line"><UserRound size={17} /><span><strong>Derya Şahin</strong>Salon yöneticisi</span></div><div className="contact-line"><CreditCard size={17} /><span><strong>Vade: 30 gün</strong>Özel iskonto: %12</span></div></div></div></div></div>;
}

function CartDrawer({ cart, onClose, onQuantity, onRemove, onSubmit }: { cart: CartItem[]; onClose: () => void; onQuantity: (id: number, quantity: number) => void; onRemove: (id: number) => void; onSubmit: () => void }) {
  const subtotal = cart.reduce((total, item) => total + item.product.price * item.quantity, 0);
  const vat = subtotal * 0.2;
  return <div className="drawer-overlay" onClick={onClose}><aside className="cart-drawer" onClick={(event) => event.stopPropagation()}><div className="drawer-header"><div><span className="eyebrow">SİPARİŞ HAZIRLA</span><h2>Sepetim <span>({cart.reduce((sum, item) => sum + item.quantity, 0)})</span></h2></div><button className="icon-button" onClick={onClose} aria-label="Sepeti kapat"><X size={20} /></button></div>{cart.length === 0 ? <div className="empty-cart"><ShoppingCart size={34} /><h3>Sepetiniz boş</h3><p>Katalogdan ürün ekleyerek siparişinizi oluşturmaya başlayın.</p></div> : <><div className="drawer-items">{cart.map((item) => <div className="drawer-item" key={item.product.id}><ProductVisual product={item.product} /><div className="drawer-item-info"><span>{item.product.brand}</span><strong>{item.product.name}</strong><b>{formatPrice(item.product.price)}</b><div className="quantity-control compact"><button onClick={() => onQuantity(item.product.id, Math.max(1, item.quantity - 1))}>−</button><strong>{item.quantity}</strong><button onClick={() => onQuantity(item.product.id, item.quantity + 1)}>+</button><button className="remove-item" onClick={() => onRemove(item.product.id)}>Kaldır</button></div></div></div>)}</div><div className="drawer-note"><FileText size={16} /><input placeholder="Sipariş notu ekle (opsiyonel)" /></div><div className="drawer-summary"><div><span>Ara toplam</span><strong>{formatPrice(subtotal)}</strong></div><div><span>KDV (%20)</span><strong>{formatPrice(vat)}</strong></div><div className="drawer-total"><span>Genel toplam</span><strong>{formatPrice(subtotal + vat)}</strong></div><button className="primary-button wide" onClick={onSubmit}>Siparişi gönder <ArrowRight size={16} /></button><small>Göndererek sipariş koşullarını kabul etmiş olursunuz.</small></div></>}</aside></div>;
}

function SalonView({ section, onNavigate, favorites, onFavorite, quantities, onQuantity, onAdd, cart, onCart, onRemove, onSubmit }: { section: SalonSection; onNavigate: (section: SalonSection) => void; favorites: number[]; onFavorite: (id: number) => void; quantities: Record<number, number>; onQuantity: (id: number, quantity: number) => void; onAdd: (product: Product) => void; cart: CartItem[]; onCart: () => void; onRemove: (id: number) => void; onSubmit: () => void }) {
  if (section === "catalog") return <CatalogView favorites={favorites} onFavorite={onFavorite} quantities={quantities} onQuantity={onQuantity} onAdd={onAdd} onCart={onCart} />;
  if (section === "orders") return <SalonOrdersView />;
  if (section === "account") return <AccountView />;
  if (section === "favorites") return <CatalogView favorites={favorites} onFavorite={onFavorite} quantities={quantities} onQuantity={onQuantity} onAdd={onAdd} onCart={onCart} />;
  return <SalonHome onCatalog={() => onNavigate("catalog")} onRepeat={() => products.slice(0, 3).forEach(onAdd)} onOrder={() => onNavigate("orders")} />;
}

function LoginModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: (role: Role) => void }) {
  const [loginRole, setLoginRole] = useState<Role>("admin");
  const [username, setUsername] = useState(loginRole === "admin" ? "admin" : "test");
  const [password, setPassword] = useState(loginRole === "admin" ? "admin123" : "test123");
  const [error, setError] = useState("");
  const updateRole = (role: Role) => { setLoginRole(role); setUsername(role === "admin" ? "admin" : "test"); setPassword(role === "admin" ? "admin123" : "test123"); setError(""); };
  const submit = (event: FormEvent) => { event.preventDefault(); const valid = loginRole === "admin" ? username === "admin" && password === "admin123" : username === "test" && password === "test123"; if (!valid) { setError("Kullanıcı adı veya şifre hatalı."); return; } onSuccess(loginRole); };
  return <div className="modal-overlay" onClick={onClose}><div className="login-modal" onClick={(event) => event.stopPropagation()}><button className="modal-close icon-button" onClick={onClose} aria-label="Kapat"><X size={19} /></button><div className="login-logo"><Logo compact /></div><span className="eyebrow">GÜVENLİ GİRİŞ</span><h2>Hesabınıza giriş yapın</h2><p>Nuance platformuna devam etmek için bilgilerinizi girin.</p><div className="role-tabs"><button className={loginRole === "admin" ? "active" : ""} onClick={() => updateRole("admin")}><ShieldCheck size={16} /> Admin</button><button className={loginRole === "salon" ? "active" : ""} onClick={() => updateRole("salon")}><Store size={16} /> Salon</button></div><form onSubmit={submit}><label>Kullanıcı adı<input value={username} onChange={(event) => setUsername(event.target.value)} /></label><label>Şifre<input type="password" value={password} onChange={(event) => setPassword(event.target.value)} /></label>{error && <div className="login-error"><AlertCircle size={15} />{error}</div>}<button className="primary-button wide" type="submit">Giriş yap <ArrowRight size={16} /></button></form><div className="login-hint"><span>Demo erişim</span><strong>{loginRole === "admin" ? "admin / admin123" : "test / test123"}</strong></div></div></div>;
}

export default function B2BApp() {
  const [role, setRole] = useState<Role>("admin");
  const [adminSection, setAdminSection] = useState<AdminSection>("dashboard");
  const [salonSection, setSalonSection] = useState<SalonSection>("home");
  const [favorites, setFavorites] = useState<number[]>([1, 3]);
  const [quantities, setQuantities] = useState<Record<number, number>>({ 1: 1, 2: 2, 3: 1, 4: 1, 5: 1, 6: 1 });
  const [cart, setCart] = useState<CartItem[]>([{ product: products[0], quantity: 2 }, { product: products[1], quantity: 1 }]);
  const [cartOpen, setCartOpen] = useState(false);
  const [loginOpen, setLoginOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [toast, setToast] = useState("");
  const cartCount = useMemo(() => cart.reduce((sum, item) => sum + item.quantity, 0), [cart]);
  const notify = (message: string) => { setToast(message); window.setTimeout(() => setToast(""), 2800); };
  const changeRole = (nextRole: Role) => { setRole(nextRole); setMobileOpen(false); setLoginOpen(false); if (nextRole === "admin") setAdminSection("dashboard"); else setSalonSection("home"); };
  const addToCart = (product: Product) => { const quantity = quantities[product.id] ?? 1; setCart((current) => { const existing = current.find((item) => item.product.id === product.id); if (existing) return current.map((item) => item.product.id === product.id ? { ...item, quantity: item.quantity + quantity } : item); return [...current, { product, quantity }]; }); notify(`${product.name.split(" ").slice(0, 3).join(" ")} sepete eklendi`); };
  const repeatOrder = () => { products.slice(0, 3).forEach((product) => setCart((current) => { const existing = current.find((item) => item.product.id === product.id); if (existing) return current.map((item) => item.product.id === product.id ? { ...item, quantity: item.quantity + 1 } : item); return [...current, { product, quantity: 1 }]; })); notify("Geçen haftaki ürünler sepete eklendi"); setSalonSection("catalog"); };
  const handleSubmit = () => { setCartOpen(false); notify("Siparişiniz başarıyla alındı. Teşekkürler!"); setSalonSection("orders"); };
  return <div className={`app-shell ${role === "salon" ? "salon-mode" : ""} ${mobileOpen ? "mobile-nav-visible" : ""}`}>{role === "admin" ? <AdminSidebar section={adminSection} onNavigate={(section) => { setAdminSection(section); setMobileOpen(false); }} onSalon={() => changeRole("salon")} onLogin={() => setLoginOpen(true)} /> : <SalonSidebar section={salonSection} onNavigate={(section) => { setSalonSection(section); setMobileOpen(false); }} onAdmin={() => changeRole("admin")} onLogin={() => setLoginOpen(true)} />}<div className={`main-area ${mobileOpen ? "mobile-nav-open" : ""}`}><Topbar role={role} onLogin={() => setLoginOpen(true)} onMobileMenu={() => setMobileOpen((open) => !open)} onSalonCart={() => setCartOpen(true)} cartCount={cartCount} /><main>{role === "admin" ? <AdminView section={adminSection} onNavigate={setAdminSection} onSalon={() => changeRole("salon")} /> : <SalonView section={salonSection} onNavigate={setSalonSection} favorites={favorites} onFavorite={(id) => setFavorites((items) => items.includes(id) ? items.filter((item) => item !== id) : [...items, id])} quantities={quantities} onQuantity={(id, quantity) => setQuantities((items) => ({ ...items, [id]: quantity }))} onAdd={addToCart} cart={cart} onCart={() => setCartOpen(true)} onRemove={(id) => setCart((items) => items.filter((item) => item.product.id !== id))} onSubmit={handleSubmit} />}</main></div>{cartOpen && <CartDrawer cart={cart} onClose={() => setCartOpen(false)} onQuantity={(id, quantity) => setCart((items) => items.map((item) => item.product.id === id ? { ...item, quantity } : item))} onRemove={(id) => setCart((items) => items.filter((item) => item.product.id !== id))} onSubmit={handleSubmit} />}{loginOpen && <LoginModal onClose={() => setLoginOpen(false)} onSuccess={changeRole} />}{toast && <div className="toast"><span><Check size={16} /></span>{toast}</div>}</div>;
}