import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '../../components/layout';
import { Button } from '../../components/ui/Button';
import { Card, CardHeader, CardBody } from '../../components/ui/Card';
import StatsGrid from '../../components/ui/Stats/StatsGrid';
import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
import ProcurementPlansToday from '../../components/domain/dashboard/ProcurementPlansToday';
import ProductionPlansToday from '../../components/domain/dashboard/ProductionPlansToday';
import PurchaseOrdersTracking from '../../components/domain/dashboard/PurchaseOrdersTracking';
import { useTenant } from '../../stores/tenant.store';
import {
  AlertTriangle,
  Clock,
  Euro,
  Package,
  Plus,
  Building2
} from 'lucide-react';

const DashboardPage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { availableTenants } = useTenant();

  const handleAddNewBakery = () => {
    navigate('/app/onboarding?new=true');
  };

  const criticalStats = [
    {
      title: t('dashboard:stats.sales_today', 'Sales Today'),
      value: '€1,247',
      icon: Euro,
      variant: 'success' as const,
      trend: {
        value: 12,
        direction: 'up' as const,
        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
      },
      subtitle: '+€135 ' + t('dashboard:messages.more_than_yesterday', 'more than yesterday')
    },
    {
      title: t('dashboard:stats.pending_orders', 'Pending Orders'),
      value: '23',
      icon: Clock,
      variant: 'warning' as const,
      trend: {
        value: 4,
        direction: 'down' as const,
        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
      },
      subtitle: t('dashboard:messages.require_attention', 'Require attention')
    },
    {
      title: t('dashboard:stats.products_sold', 'Products Sold'),
      value: '156',
      icon: Package,
      variant: 'info' as const,
      trend: {
        value: 8,
        direction: 'up' as const,
        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
      },
      subtitle: '+12 ' + t('dashboard:messages.more_units', 'more units')
    },
    {
      title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
      value: '4',
      icon: AlertTriangle,
      variant: 'error' as const,
      trend: {
        value: 100,
        direction: 'up' as const,
        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
      },
      subtitle: t('dashboard:messages.action_required', 'Action required')
    }
  ];

  const handleOrderItem = (itemId: string) => {
    console.log('Ordering item:', itemId);
  };

  const handleStartOrder = (orderId: string) => {
    console.log('Starting production order:', orderId);
  };

  const handlePauseOrder = (orderId: string) => {
    console.log('Pausing production order:', orderId);
  };

  const handleViewDetails = (id: string) => {
    console.log('Viewing details for:', id);
  };

  const handleViewAllPlans = () => {
    console.log('Viewing all plans');
  };

  return (
    <div className="space-y-6 p-4 sm:p-6">
      <PageHeader
        title={t('dashboard:title', 'Dashboard')}
        description={t('dashboard:subtitle', 'Overview of your bakery operations')}
      />

      {/* Critical Metrics using StatsGrid */}
      <StatsGrid
        stats={criticalStats}
        columns={4}
        gap="lg"
        className="mb-6"
      />

      {/* Quick Actions - Add New Bakery */}
      {availableTenants && availableTenants.length > 0 && (
        <Card>
          <CardHeader>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">{t('dashboard:sections.quick_actions', 'Quick Actions')}</h3>
            <p className="text-sm text-[var(--text-secondary)]">{t('dashboard:messages.manage_organizations', 'Manage your organizations')}</p>
          </CardHeader>
          <CardBody>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <Button
                onClick={handleAddNewBakery}
                variant="outline"
                size="lg"
                className="h-auto p-6 flex flex-col items-center gap-3 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border-[var(--color-primary)]/20 hover:border-[var(--color-primary)]/40 hover:bg-[var(--color-primary)]/20 transition-all duration-200"
              >
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
                  <Plus className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <div className="text-center">
                  <div className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.add_new_bakery', 'Add New Bakery')}</div>
                  <div className="text-sm text-[var(--text-secondary)] mt-1">{t('dashboard:messages.setup_new_business', 'Set up a new business from scratch')}</div>
                </div>
              </Button>

              <div className="flex flex-col items-center justify-center p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
                <Building2 className="w-8 h-8 text-[var(--text-tertiary)] mb-2" />
                <div className="text-center">
                  <div className="text-sm font-medium text-[var(--text-secondary)]">{t('dashboard:messages.active_organizations', 'Active Organizations')}</div>
                  <div className="text-2xl font-bold text-[var(--color-primary)]">{availableTenants.length}</div>
                </div>
              </div>
            </div>
          </CardBody>
        </Card>
      )}

      {/* Full width blocks - one after another */}
      <div className="space-y-6">
        {/* 1. Real-time alerts block */}
        <RealTimeAlerts />

        {/* 2. Purchase Orders Tracking block */}
        <PurchaseOrdersTracking />

        {/* 3. Procurement plans block */}
        <ProcurementPlansToday
          onOrderItem={handleOrderItem}
          onViewDetails={handleViewDetails}
          onViewAllPlans={handleViewAllPlans}
        />

        {/* 4. Production plans block */}
        <ProductionPlansToday
          onStartOrder={handleStartOrder}
          onPauseOrder={handlePauseOrder}
          onViewDetails={handleViewDetails}
          onViewAllPlans={handleViewAllPlans}
        />
      </div>
    </div>
  );
};

export default DashboardPage;