import Link from 'next/link';
import type { CSSProperties, ReactNode } from 'react';
import { MobileNav, SidebarNav } from './app-navigation';

export function Brand({ compact = false }: { compact?: boolean }) {
  return (
    <Link className="brand" href="/" aria-label="منصة استثمار المزارع العراقية">
      <span className="brand-mark" aria-hidden="true"><i /><b /></span>
      {!compact && (
        <span className="brand-copy">
          <strong>منصة استثمار المزارع العراقية</strong>
          <small>إدارة · تشغيل · متابعة</small>
        </span>
      )}
    </Link>
  );
}

export function StatusPill({ children, tone = 'green' }: { children: ReactNode; tone?: 'green' | 'amber' | 'red' | 'gray' | 'blue' }) {
  return <span className={`status-pill status-${tone}`}>{children}</span>;
}

export function MetricCard({ label, value = '—', hint, icon, accent = 'green' }: { label: string; value?: string; hint?: string; icon?: string; accent?: 'green' | 'blue' | 'amber' | 'rose' }) {
  return (
    <article className={`metric-card metric-${accent}`}>
      <div className="metric-icon" aria-hidden="true">{icon ?? '•'}</div>
      <div className="metric-copy">
        <span>{label}</span>
        <strong>{value}</strong>
        {hint && <small>{hint}</small>}
      </div>
      <span className="metric-shine" aria-hidden="true" />
    </article>
  );
}

export function ProjectCard({ title, category, location, status = 'قيد الإعداد' }: { title: string; category: string; location: string; status?: string }) {
  return (
    <article className="project-card premium-lift">
      <div className="project-cover project-cover-poultry">
        <div className="project-depth-layer depth-back" />
        <div className="project-depth-layer depth-mid" />
        <div className="project-depth-layer depth-front" />
        <StatusPill tone="green">{category}</StatusPill>
        <span className="demo-watermark">DEMO</span>
      </div>
      <div className="project-card-body">
        <div className="card-row"><StatusPill tone="amber">{status}</StatusPill><span className="soft-meta">واجهة تجريبية</span></div>
        <h3>{title}</h3>
        <p>{location}</p>
        <Link className="button button-secondary" href="/projects/demo-poultry-expansion">عرض التفاصيل</Link>
      </div>
    </article>
  );
}

const mainItems = [
  ['الرئيسية', '/dashboard', '⌂'],
  ['الحساب المالي', '/dashboard/finance', '◎'],
  ['الإيداع والسحب', '/dashboard/funds', '⇄'],
  ['استثماراتي', '/dashboard/investments', '◇'],
  ['الأرباح', '/dashboard/profits', '↗'],
  ['السجل الرقمي', '/dashboard/farm', '◫'],
  ['المشاريع', '/dashboard/projects', '▱'],
  ['التقارير', '/dashboard/reports', '▥'],
  ['المستندات', '/dashboard/documents', '▤'],
  ['التحليل الذكي', '/dashboard/ai', '✦'],
  ['الأمان', '/dashboard/security', '⚑'],
  ['المحاسبة', '/dashboard/accounting', '∑'],
  ['الإعدادات', '/dashboard/settings', '⚙']
] as const;

export function AppSidebar({ admin = false }: { admin?: boolean }) {
  const items = admin
    ? [
        ['الرئيسية', '/admin', '⌂'], ['المستخدمون', '/admin/users', '♙'], ['المستثمرون', '/admin/investors', '◎'],
        ['الإدارة المالية', '/admin/finance', '∑'], ['الإيداعات', '/admin/deposits', '↓'], ['السحوبات', '/admin/withdrawals', '↑'],
        ['خطط الاستثمار', '/admin/plans', '◇'], ['الأرباح', '/admin/profits', '↗'], ['KYC', '/admin/kyc', '✓'],
        ['المشاريع', '/admin/projects', '▱'], ['إدارة المزرعة', '/dashboard/farm', '◫'], ['التقارير', '/dashboard/reports', '▥'],
        ['المستندات', '/dashboard/documents', '▤'], ['التراخيص', '/admin/licenses', '▣'], ['الامتثال', '/admin/compliance', '⚑'],
        ['صحة النظام', '/admin/system', '◉'], ['الإعدادات', '/admin/settings', '⚙']
      ] as const
    : mainItems;
  return (
    <aside className="app-sidebar">
      <Brand />
      <SidebarNav items={items} label={admin ? 'قائمة الإدارة' : 'قائمة المستخدم'} />
      <div className="sidebar-status">
        <span className="status-dot" />
        <div><strong>وضع التشغيل</strong><small>دفتر داخلي · مراجعة إدارية</small></div>
      </div>
    </aside>
  );
}

export function AppTopbar({ title, subtitle = 'لوحة تشغيلية للمشروع' }: { title: string; subtitle?: string }) {
  return (
    <header className="app-topbar">
      <div>
        <span className="eyebrow">منصة المزرعة</span>
        <h1>{title}</h1>
        <small>{subtitle}</small>
      </div>
      <div className="topbar-actions">
        <button className="icon-button" type="button" aria-label="الإشعارات">◔</button>
        <StatusPill tone="green">العربية</StatusPill>
        <div className="avatar">م</div>
      </div>
    </header>
  );
}

export function EmptyChart({ label, variant = 'line' }: { label: string; variant?: 'line' | 'bars' }) {
  return (
    <div className={`empty-chart chart-${variant}`} aria-label={label}>
      <div className="chart-grid" />
      {variant === 'line' ? (
        <svg viewBox="0 0 500 150" preserveAspectRatio="none" aria-hidden="true">
          <defs>
            <linearGradient id="chartFade" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#2cb67d" stopOpacity=".34"/><stop offset="1" stopColor="#2cb67d" stopOpacity="0"/></linearGradient>
          </defs>
          <path d="M0 120 70 104 125 112 190 76 255 90 315 57 378 72 440 43 500 52V150H0Z" fill="url(#chartFade)" />
          <polyline points="0,120 70,104 125,112 190,76 255,90 315,57 378,72 440,43 500,52" fill="none" vectorEffect="non-scaling-stroke" />
        </svg>
      ) : (
        <div className="bar-skeleton" aria-hidden="true"><i/><i/><i/><i/><i/><i/><i/></div>
      )}
      <span>يظهر الرسم بعد إدخال البيانات الفعلية</span>
    </div>
  );
}

export function ProgressRing({ value = 0, label }: { value?: number; label: string }) {
  const safeValue = Math.max(0, Math.min(100, value));
  return (
    <div className="progress-ring" style={{ '--ring-value': `${safeValue * 3.6}deg` } as CSSProperties}>
      <div><strong>{safeValue}%</strong><span>{label}</span></div>
    </div>
  );
}

export function PremiumFarmScene({ compact = false }: { compact?: boolean }) {
  return (
    <div className={`farm-scene ${compact ? 'farm-scene-compact' : ''}`} aria-hidden="true">
      <div className="scene-glow" />
      <div className="scene-orbit orbit-one" />
      <div className="scene-orbit orbit-two" />
      <div className="scene-panel panel-a"><span>إنتاج</span><b>LIVE DATA</b></div>
      <div className="scene-panel panel-b"><span>المزرعة</span><b>OPS</b></div>
      <div className="scene-panel panel-c"><span>التقارير</span><b>REPORTS</b></div>
      <div className="scene-cube"><i/><i/><i/></div>
    </div>
  );
}

export function MobileDock({ admin = false }: { admin?: boolean }) {
  const items: Array<[string, string, string]> = admin
    ? [['الرئيسية', '/admin', '⌂'], ['المالية', '/admin/finance', '∑'], ['الإيداعات', '/admin/deposits', '↓'], ['الأرباح', '/admin/profits', '↗']]
    : [['الرئيسية', '/dashboard', '⌂'], ['الرصيد', '/dashboard/finance', '◎'], ['استثمار', '/dashboard/investments', '◇'], ['الأرباح', '/dashboard/profits', '↗']];
  return <MobileNav items={items} label="تنقل الموبايل" />;
}

export function VisualNotice({ children }: { children: ReactNode }) {
  return <div className="visual-notice"><span>i</span><p>{children}</p></div>;
}