import React from 'react';
import { Hexagon } from 'lucide-react';

export const ReceiptLayout = ({ order }: { order: any }) => {
  if (!order) return null;
  
  return (
    <div style={{ width: '80mm', margin: '0 auto', fontFamily: 'monospace', color: '#000', fontSize: '12px', background: '#fff', padding: '10px' }}>
      <div style={{ textAlign: 'center', marginBottom: '10px' }}>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
          <Hexagon size={28} fill="#000" stroke="#fff" />
          <h2 style={{ margin: '0', fontSize: '22px', fontWeight: '900', letterSpacing: '1px' }}>REHMAN STEEL</h2>
        </div>
        <div style={{ fontSize: '11px', fontWeight: 'bold' }}>Contact: +92 318 1995935</div>
        <div style={{ fontSize: '10px' }}>Sector 20 C Shah Latif Town</div>
        <div style={{ fontSize: '10px', marginTop: '4px', color: '#555' }}>{order.date}</div>
      </div>
      
      <div style={{ textAlign: 'center', margin: '10px 0', padding: '5px', border: '1px dashed #000', borderRadius: '5px' }}>
        <div style={{ fontSize: '10px', textTransform: 'uppercase' }}>Receipt No</div>
        <div style={{ fontSize: '14px', fontWeight: 'bold' }}>{order.id}</div>
      </div>
      
      <div style={{ marginBottom: '10px', fontSize: '11px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }}>
          <span style={{ color: '#555' }}>Customer Name</span>
          <span>{order.customer_name || '-'}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }}>
          <span style={{ color: '#555' }}>Customer Phone</span>
          <span>{order.customer_phone || '-'}</span>
        </div>
      </div>

      <div style={{ borderBottom: '1px dashed #000', marginBottom: '5px' }}></div>
      
      <table style={{ width: '100%', marginBottom: '5px', textAlign: 'left', borderCollapse: 'collapse', fontSize: '11px' }}>
        <thead>
          <tr>
            <th style={{ paddingBottom: '5px' }}>Item</th>
            <th style={{ textAlign: 'right', paddingBottom: '5px' }}>Qty</th>
            <th style={{ textAlign: 'right', paddingBottom: '5px' }}>Amount</th>
          </tr>
        </thead>
        <tbody>
          {order.items?.map((item: any, idx: number) => (
            <tr key={idx}>
              <td style={{ paddingBottom: '3px' }}>{item.product.name}</td>
              <td style={{ textAlign: 'right', paddingBottom: '3px' }}>{item.qty}</td>
              <td style={{ textAlign: 'right', paddingBottom: '3px' }}>{item.product.price * item.qty}</td>
            </tr>
          ))}
        </tbody>
      </table>
      
      <div style={{ borderBottom: '1px dashed #000', marginBottom: '5px' }}></div>
      
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px', fontSize: '11px' }}>
        <span>Amount</span>
        <span>{order.total} PKR</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px', fontSize: '11px' }}>
        <span>Tax</span>
        <span>0 PKR</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', fontSize: '14px', marginBottom: '10px', marginTop: '5px' }}>
        <span>Total</span>
        <span>{order.total} PKR</span>
      </div>
      
      <div style={{ borderBottom: '1px dashed #000', marginBottom: '10px' }}></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', marginBottom: '10px' }}>
        <span>Operator</span>
        <span>Admin</span>
      </div>
      
      <div style={{ textAlign: 'center', marginBottom: '15px' }}>
        <h2 style={{ margin: 0, fontStyle: 'italic', fontWeight: 900 }}>REHMAN STEEL</h2>
      </div>

      <div style={{ textAlign: 'center', fontSize: '9px', color: '#555', borderTop: '1px dotted #ccc', paddingTop: '5px' }}>
        Design and Developed by Khurram Mughal 03170331379
      </div>
    </div>
  );
};
