'use client';

import React, { useEffect, useState } from 'react';
import { ReceiptLayout } from '@/components/ReceiptLayout';
import { Printer } from 'lucide-react';

export default function OrdersPage() {
  const [orders, setOrders] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedOrder, setSelectedOrder] = useState<any>(null);

  useEffect(() => {
    fetchOrders();
  }, []);

  const fetchOrders = () => {
    fetch('/api/orders')
      .then(res => res.json())
      .then(data => {
        if (Array.isArray(data)) {
          setOrders(data);
        }
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  };

  const handleReprint = (order: any) => {
    setSelectedOrder(order);
    // Add small delay to let state update and print div to render
    setTimeout(() => {
      window.print();
    }, 100);
  };

  if (loading) return <div>Loading orders...</div>;

  return (
    <div>
      <div className="print-hide">
        <h1>Order History</h1>
        <p style={{ color: 'var(--text-muted)', marginBottom: '2rem' }}>View past sales and reprint receipts.</p>

        <div className="panel">
          {orders.length === 0 ? (
            <p>No orders found.</p>
          ) : (
            <table className="data-table">
              <thead>
                <tr>
                  <th>Receipt No</th>
                  <th>Date</th>
                  <th>Customer</th>
                  <th>Phone</th>
                  <th>Total Amount</th>
                  <th style={{ textAlign: 'center' }}>Actions</th>
                </tr>
              </thead>
              <tbody>
                {orders.map(order => (
                  <tr key={order.id}>
                    <td style={{ fontWeight: 'bold' }}>{order.id}</td>
                    <td>{order.date}</td>
                    <td>{order.customer_name || '-'}</td>
                    <td>{order.customer_phone || '-'}</td>
                    <td style={{ color: 'var(--success)', fontWeight: 'bold' }}>
                      Rs {Number(order.total).toLocaleString()}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      <button onClick={() => handleReprint(order)} style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '0.4rem 0.8rem', fontSize: '0.85rem' }}>
                        <Printer size={14} /> Reprint
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Hidden print layout for reprinting */}
      {selectedOrder && (
        <div className="print-receipt" style={{ display: 'none' }}>
          <ReceiptLayout order={selectedOrder} />
        </div>
      )}
    </div>
  );
}