import { addKitComponent, buildAssembly } from "@/lib/actions";
import { getAssembliesWithComponents, getParts } from "@/lib/repository";

export default function AssembliesPage() {
  const parts = getParts();
  const assemblies = parts.filter((part) => part.kind === "assembly");
  const components = parts.filter((part) => part.kind === "part");
  const kitRows = getAssembliesWithComponents();

  return (
    <div className="grid">
      <section className="two-up">
        <article className="panel">
          <h2 className="section-title">Bill of Materials</h2>
          <p className="section-copy">Define which stocked parts are consumed to build each assembly.</p>
          <form action={addKitComponent} className="form-grid">
            <div className="form-row">
              <label htmlFor="assemblySku">Assembly SKU</label>
              <select className="select" id="assemblySku" name="assemblySku">{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
            </div>
            <div className="form-row">
              <label htmlFor="componentSku">Component SKU</label>
              <select className="select" id="componentSku" name="componentSku">{components.map((component) => <option key={component.id} value={component.sku}>{component.sku} - {component.name}</option>)}</select>
            </div>
            <div className="form-row"><label htmlFor="component-qty">Quantity Per Assembly</label><input className="input" id="component-qty" name="quantity" type="number" min="0.01" step="0.01" defaultValue="1" /></div>
            <button className="button" type="submit">Save Component</button>
          </form>
        </article>
        <article className="panel">
          <h2 className="section-title">Build Assembly</h2>
          <p className="section-copy">Consume component stock and create finished kit inventory in one transaction flow.</p>
          <form action={buildAssembly} className="form-grid">
            <div className="form-row">
              <label htmlFor="build-assembly">Assembly SKU</label>
              <select className="select" id="build-assembly" name="assemblySku">{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
            </div>
            <div className="form-row"><label htmlFor="build-qty">Build Quantity</label><input className="input" id="build-qty" name="quantity" type="number" min="1" step="1" defaultValue="1" /></div>
            <button className="button secondary" type="submit">Build Now</button>
          </form>
        </article>
      </section>
      <section className="panel">
        <h2 className="section-title">Current Assemblies</h2>
        <div className="table-wrap">
          <table className="table">
            <thead><tr><th>Assembly</th><th>Name</th><th>Component</th><th>Component Name</th><th>Qty Per</th></tr></thead>
            <tbody>
              {kitRows.length === 0 ? (
                <tr><td colSpan={5} className="muted">Add an assembly on the Parts page, then define its bill of materials here.</td></tr>
              ) : (
                kitRows.map((row, index) => (
                  <tr key={`${row.assemblySku}-${row.componentSku}-${index}`}>
                    <td>{row.assemblySku}</td><td>{row.assemblyName}</td><td>{row.componentSku}</td><td>{row.componentName}</td><td>{row.quantity}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}