import React, { useMemo, useState } from “react”;
import { motion, AnimatePresence } from “framer-motion”;
import { Card, CardContent } from “@/components/ui/card”;
import { Button } from “@/components/ui/button”;
import { Badge } from “@/components/ui/badge”;
import { ChevronDown, ChevronRight, Search, Workflow, Users, CheckCircle2 } from “lucide-react”;

const phases = [
“Concept → Global Model”,
“Design Review & Approval”,
“Base / Embed / Cast-in Scope”,
“Steel-to-Steel Connections”,
“Connection Review & Approval”,
“Fabrication Modeling”,
“Detailing & Erection Drawings”,
“Erection Engineering”,
];

const roles = [
{ id: “architect”, label: “Architect” },
{ id: “consultant”, label: “Structural Consultant” },
{ id: “designer”, label: “Connection Designer” },
{ id: “modeling”, label: “Detailing / Modeling” },
{ id: “erection”, label: “Erection / QA-QC” },
{ id: “authority”, label: “Authority / Third-Party” },
];

const raci = {
“Concept → Global Model”: [“C”, “R/A”, “I”, “I”, “I”, “I”],
“Design Review & Approval”: [“I”, “R”, “I”, “I”, “I”, “A/C”],
“Base / Embed / Cast-in Scope”: [“I”, “R/A”, “C”, “I”, “I”, “I”],
“Steel-to-Steel Connections”: [“I”, “C/A”, “R/A”, “I”, “I”, “I”],
“Connection Review & Approval”: [“I”, “C/A”, “R”, “I”, “I”, “A/C”],
“Fabrication Modeling”: [“I”, “I”, “C”, “R/A”, “I”, “I”],
“Detailing & Erection Drawings”: [“I”, “I”, “C”, “R”, “I”, “I”],
“Erection Engineering”: [“I”, “C”, “I”, “I”, “R/A”, “I”],
};

const workflow = [
{ n: 1, title: “Architectural Design”, text: “Coordinated plans, sections, elevations and BIM model.” },
{ n: 2, title: “Structural Concept & Global Model”, text: “ETABS / SAP2000 / STAAD / Robot model, loads, combinations, sizing.” },
{ n: 3, title: “Design Review & Approval”, text: “Internal check, municipality or third-party compliance approval.” },
{ n: 4, title: “Scope Split”, text: “Consultant handles selected steel–concrete interfaces; contractor handles most steel details.” },
{ n: 5, title: “Connection Design”, text: “Code-check joints, iterate with consultant, publish connection library.” },
{ n: 6, title: “Connection Review & Approval”, text: “Consultant review and authority / third-party sign-off where required.” },
{ n: 7, title: “Fabrication Modeling”, text: “Tekla / Advance Steel / SDS2 model using connection parameters.” },
{ n: 8, title: “2D Detailing”, text: “GA, assembly, single-part, erection drawings and bolt/weld schedules.” },
{ n: 9, title: “Procurement”, text: “Order sections, plates, bolts, anchors; plan cutting, drilling, welding, painting.” },
{ n: 10, title: “Shop Fabrication”, text: “WPS/WPQR, dimensional checks, NDT, as-built model updates.” },
{ n: 11, title: “Erection Engineering”, text: “Lifting studies, crane capacity, temporary bracing and partial-state checks.” },
{ n: 12, title: “Site Erection & As-Built”, text: “Transport, erection, bolting, welds, grouting, anchors and redlines.” },
];

const roleDetails = {
architect: {
title: “Architect”,
does: [
“Develops coordinated plans, sections, elevations and BIM model.”,
“Provides architectural intent and spatial constraints that affect structure and connection detailing.”,
],
benefits: [
“Earlier clash coordination with steel, MEP and architectural models.”,
“Fewer late changes caused by connection geometry, stiffeners, baseplates or anchors.”,
],
},
consultant: {
title: “Structural Consultant”,
does: [
“Builds and validates steel–concrete interfaces such as anchoring, baseplates and cast-in plates.”,
“Uses connection stiffness to calibrate global FEA behavior using realistic M–θ response.”,
“Checks members with actual end releases from the intended connection design.”,
“Moves members and connections from FEA into IDEA StatiCa through Checkbot without re-typing geometry.”,
],
benefits: [
“More reliable deflections and design forces through measured joint stiffness.”,
“Fewer redesign loops caused by idealized pinned or rigid assumptions.”,
“Better traceability between global model, connection model and signed reports.”,
],
},
designer: {
title: “Connection Designer / Contractor / Fabricator”,
does: [
“Models joints using the CBFEM approach and verifies plates, bolts and welds.”,
“Designs baseplates and cast-in plates with anchors and realistic load transfer.”,
“Batch-manages many joints in Checkbot and keeps IDs/GUIDs aligned with global model and CAD.”,
“Maintains parametric templates for typical joints to accelerate iteration and approval.”,
],
benefits: [
“Standardized template libraries improve consistency, speed and quality.”,
“Faster review cycles using clear 3D views and standardized calculation reports.”,
“Less overdesign compared with conservative envelope-based workflows.”,
“Reusable connection families reduce project-to-project reinvention.”,
],
},
modeling: {
title: “Detailing / Modeling Team”,
does: [
“Imports connection IFC overlays retaining global coordinates from the FEA model.”,
“Uses stable connection IDs that match calculation reports for traceability.”,
“Coordinates clashes around stiffeners, baseplates, anchors and bracing.”,
“Uses revision exports and stable IDs to quickly identify impacted joints.”,
],
benefits: [
“Less re-typing of connection data and fewer modeling errors.”,
“Faster first-pass modeling using global coordinates and connection IDs.”,
“Better coordination with MEP and architectural models.”,
“Fewer RFIs caused by unclear connection location or identity.”,
],
},
erection: {
title: “Erection Engineering / Site / QA-QC”,
does: [
“Validates temporary conditions and partially braced states during lifting and sequencing.”,
“Uses stiffness references to anticipate fit-up and deflection behavior.”,
“Executes WPS/WPQR, dimensional checks, NDT and as-built updates.”,
“Handles fast site changes by editing geometry, re-checking and re-issuing reports.”,
],
benefits: [
“Rapid redesign and report re-issue helps keep erection moving.”,
“Reduced crane and crew idle time during site changes.”,
“Better temporary works and partial-state validation.”,
],
},
authority: {
title: “Authority / Third-Party Reviewer / AHJ”,
does: [
“Reviews connection calculations, 3D joint visualization and project compliance evidence.”,
“Uses standardized IDEA StatiCa reports with clear inputs, outputs and stress/strain visuals.”,
],
benefits: [
“Clearer and faster reviews using standardized reports and 3D joint views.”,
“Less back-and-forth compared with scattered spreadsheets or formula-only submittals.”,
“Higher confidence in load paths, components and governing checks.”,
],
},
};

const legend = {
R: “Responsible — does the job”,
A: “Accountable — makes sure it is correct and safe”,
C: “Consulted — provides input or opinion”,
I: “Informed — knows it is happening”,
};

function raciClass(value) {
if (value.includes(“R”) && value.includes(“A”)) return “bg-orange-100 text-orange-800 border-orange-200”;
if (value.includes(“R”)) return “bg-blue-100 text-blue-800 border-blue-200”;
if (value.includes(“A”)) return “bg-red-100 text-red-800 border-red-200”;
if (value.includes(“C”)) return “bg-emerald-100 text-emerald-800 border-emerald-200”;
return “bg-slate-100 text-slate-600 border-slate-200”;
}

export default function SteelWorkflowApp() {
const [selectedRole, setSelectedRole] = useState(“consultant”);
const [selectedPhase, setSelectedPhase] = useState(“Concept → Global Model”);
const [query, setQuery] = useState(“”);

const visibleWorkflow = useMemo(() => {
if (!query.trim()) return workflow;
return workflow.filter((s) => `${s.title} ${s.text}`.toLowerCase().includes(query.toLowerCase()));
}, [query]);

const selected = roleDetails[selectedRole];
const selectedRoleIndex = roles.findIndex((r) => r.id === selectedRole);
const selectedRaci = raci[selectedPhase]?.[selectedRoleIndex] || “I”;

return (

);
}

function ExpandableSection({ title, children, defaultOpen = false }) {
const [open, setOpen] = useState(defaultOpen);
return (

);
}