import React from "react";
import { createRoot } from "react-dom/client";
import { calculateEstimate } from "./pricing/calculate";
import { PRICING } from "./pricing/config";
import type { Slab, Estimate } from "./pricing/types";
import "./style.css";

const money = (n: number) => new Intl.NumberFormat("en-CA",{style:"currency",currency:"CAD"}).format(n);
const initialSlab = (): Slab => ({name:"",lengthIn:120,widthIn:63,retailPrice:0,acquisitionCost:0,quantity:1});
function App() {
 const [customer,setCustomer] = React.useState({name:"",email:"",phone:"",project:""});
 const [slabs,setSlabs] = React.useState<Slab[]>([initialSlab()]);
 const [fabricationHours,setFabricationHours] = React.useState(0);
 const [fabricationRate,setFabricationRate] = React.useState(85);
 const [miscHours,setMiscHours] = React.useState(0);
 const [miscRate,setMiscRate] = React.useState(52.5);
 const [delivery,setDelivery] = React.useState<number>(PRICING.defaultSupplierDeliveryPerSlab);
 const [destination,setDestination] = React.useState("");
 const [fixedTravel,setFixedTravel] = React.useState<number | "">("");
 const [markup,setMarkup] = React.useState(0);
 const [competitor,setCompetitor] = React.useState<number | "">("");
 const [result,setResult] = React.useState<Estimate | null>(null);
 const [error,setError] = React.useState("");
 const updateSlab=(index:number,patch:Partial<Slab>)=>{setSlabs(prev=>prev.map((s,i)=>i===index?{...s,...patch}:s));setResult(null);};
 const numberField=(label:string,value:number,set:(n:number)=>void,step="0.01")=><label>{label}<input type="number" min="0" step={step} value={value} onChange={e=>{set(Number(e.target.value));setResult(null);}}/></label>;
 const quote=()=>{
  try {
   setError("");
   if (!customer.name.trim()) throw new Error("Customer name is required");
   if (!slabs.length || slabs.some(s=>!s.name.trim())) throw new Error("Name every selected slab");
   if (!destination.trim() || fixedTravel==="") throw new Error("Enter the destination and its verified fixed travel charge");
   setResult(calculateEstimate({slabs,fabricationHours,fabricationRate,miscellaneousHours:miscHours,miscellaneousRate:miscRate,supplierDeliveryPerSlab:delivery,destination,fixedTravelCharges:{[destination.trim()]:fixedTravel},materialMarkupPercent:markup,competitorQuote:competitor===""?undefined:competitor}));
  } catch(e) {setResult(null);setError(e instanceof Error?e.message:String(e));}
 };
 return <main>
  <header className="screen"><div><h1>Fixit Granite <span>Estimator</span></h1><p>v0.01 • Internal development preview • CAD</p></div><strong>QUOTE BUILDER</strong></header>
  <div className="screen notice">Draft estimates only. Verify all supplier prices and destination charges. Tax, authentication, saved quotes and administrator approvals are not configured.</div>
  <section className="screen"><h2>1. Customer & project</h2><div className="grid">{([["name","Customer name"],["email","Email"],["phone","Phone"],["project","Project / address"]] as const).map(([key,label])=><label key={key}>{label}<input value={customer[key]} onChange={e=>{setCustomer({...customer,[key]:e.target.value});setResult(null);}}/></label>)}</div></section>
  <section className="screen"><div className="heading"><h2>2. Slab selection & dimensions</h2><button className="secondary" onClick={()=>{setSlabs([...slabs,initialSlab()]);setResult(null);}}>+ Add slab</button></div>{slabs.map((slab,index)=><div className="slab" key={index}><div className="heading"><h3>Slab {index+1}</h3><button className="textbutton" disabled={slabs.length===1} onClick={()=>{setSlabs(slabs.filter((_,i)=>i!==index));setResult(null);}}>Remove</button></div><div className="grid">
  <label>Material / supplier reference<input value={slab.name} placeholder="e.g. Quartz - supplier SKU" onChange={e=>updateSlab(index,{name:e.target.value})}/></label>
  {([["lengthIn","Length (in)"],["widthIn","Full width (in)"],["usableWidthIn","Usable width (in)"],["quantity","Quantity"],["retailPrice","Retail price per slab (CAD)"],["acquisitionCost","Actual supplier cost (internal CAD)"]] as const).map(([key,label])=><label key={key}>{label}<input type="number" min="0" step={key==="quantity"?"1":"0.01"} value={slab[key]??""} onChange={e=>updateSlab(index,{[key]:e.target.value===""&&key==="usableWidthIn"?undefined:Number(e.target.value)})}/></label>)}</div></div>)}</section>
  <section className="screen"><h2>3. Labour, delivery & travel</h2><div className="grid">{numberField("Fabrication hours",fabricationHours,setFabricationHours)}{numberField("Fabrication rate (CAD 70–100/hr)",fabricationRate,setFabricationRate)}{numberField("Miscellaneous repair hours",miscHours,setMiscHours)}{numberField("Miscellaneous rate (CAD 50–55/hr)",miscRate,setMiscRate)}{numberField("Supplier delivery per slab (CAD)",delivery,setDelivery)}{numberField("Material markup (0–15%)",markup,setMarkup)}<label>Travel destination<input value={destination} onChange={e=>{setDestination(e.target.value);setResult(null);}} placeholder="Enter verified destination"/></label><label>Fixed travel charge (CAD)<input type="number" min="0" step="0.01" value={fixedTravel} onChange={e=>{setFixedTravel(e.target.value===""?"":Number(e.target.value));setResult(null);}}/></label><label>Competitor quote (optional CAD)<input type="number" min="0" step="0.01" value={competitor} onChange={e=>{setCompetitor(e.target.value===""?"":Number(e.target.value));setResult(null);}}/></label></div><p className="muted">No mileage, fuel, or driving-time surcharge is added. Competitor matching only; further discounts require authenticated administrator approval in a future release.</p></section>
  <div className="screen actions"><button onClick={quote}>Calculate quote</button>{result&&<button className="secondary" onClick={()=>window.print()}>Print customer quote / Save PDF</button>}</div>
  {error&&<p className="screen error" role="alert">{error}</p>}
  {result&&<><section className="screen internal"><h2>Internal estimate breakdown</h2><div className="grid"><p>Material retail: <b>{money(result.material)}</b></p><p>Material acquisition: <b>{money(result.materialCost)}</b></p><p>Fabrication: <b>{money(result.fabrication)}</b></p><p>Other labour: <b>{money(result.miscellaneous)}</b></p><p>Supplier delivery: <b>{money(result.delivery)}</b></p><p>Fixed travel: <b>{money(result.travel)}</b></p><p>Estimated gross profit before overhead: <b>{money(result.estimatedGrossProfit)}</b></p></div>{result.warnings.map(w=><p className="error" key={w}>{w}</p>)}</section>
  <section className="quote" aria-label="Customer quote"><div className="heading"><div><h2>FIXIT GRANITE</h2><p>Project estimate • Draft</p></div><strong>CAD</strong></div><hr/><p><b>Prepared for:</b> {customer.name}</p>{customer.project&&<p><b>Project:</b> {customer.project}</p>}{customer.email&&<p><b>Email:</b> {customer.email}</p>}{customer.phone&&<p><b>Phone:</b> {customer.phone}</p>}<h3>Materials</h3><table><thead><tr><th>Material</th><th>Dimensions (in)</th><th>Qty</th></tr></thead><tbody>{slabs.map((s,i)=><tr key={i}><td>{s.name}</td><td>{s.lengthIn} × {s.widthIn}{s.usableWidthIn!==undefined?` (usable ${s.usableWidthIn})`:""}</td><td>{s.quantity}</td></tr>)}</tbody></table><div className="total"><span>Estimated subtotal (before tax)</span><strong>{money(result.sellingPrice)}</strong></div><p className="muted">Preliminary estimate, subject to site measurements, material availability, final scope and applicable taxes. Not an invoice or binding offer.</p></section></>}
 </main>;
}
createRoot(document.getElementById("root")!).render(<App/>);