"use client";

import { Document, Page, Text, View, StyleSheet, Image } from "@react-pdf/renderer";

// Simple styled PDF for inspection requests (keeps same brand tokens)
const C = {
  navy: "#1d3658",
  gold: "#c69b39",
  darkNavy: "#121926",
  white: "#ffffff",
  textDark: "#1a2235",
  textMid: "#3d4d6a",
  textMute: "#6b7a99",
  border: "#dde3ef",
  rowAlt: "#f8fafd",
};

const s = StyleSheet.create({
  page: { backgroundColor: C.white, fontFamily: "Helvetica", fontSize: 9, color: C.textDark, paddingTop: 104, paddingBottom: 64 },
  header: { position: "absolute", top: 0, left: 0, right: 0 },
  headerInner: { backgroundColor: C.navy, paddingHorizontal: 40, paddingTop: 20, paddingBottom: 18, flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
  logo: { width: 128, height: 32, objectFit: "contain" },
  headerRight: { alignItems: "flex-end" },
  headerEyebrow: { fontSize: 6.5, fontFamily: "Helvetica-Bold", color: C.gold, letterSpacing: 2.5, textTransform: "uppercase" },
  headerTitle: { fontSize: 16, fontFamily: "Helvetica-Bold", color: C.white, letterSpacing: 1.5, marginTop: 3 },
  headerMeta: { fontSize: 7.5, color: "rgba(255,255,255,0.45)", marginTop: 4 },
  goldStripe: { height: 4, backgroundColor: C.gold },
  body: { paddingHorizontal: 40, paddingTop: 18 },
  section: { marginBottom: 14 },
  label: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.textMid, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 6 },
  field: { marginBottom: 8 },
  fieldText: { fontSize: 9, color: C.textDark, lineHeight: 1.5 },
  footer: { position: "absolute", bottom: 0, left: 0, right: 0, backgroundColor: C.darkNavy, paddingHorizontal: 40, paddingVertical: 13, flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
  footerLeft: { flex: 1 },
  footerCenter: { flex: 1, alignItems: "center" },
  footerRight: { flex: 1, alignItems: "flex-end" },
  footerText: { fontSize: 7, color: "rgba(255,255,255,0.38)" },
});

function fmtDate(iso?: string) {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
}

export function RequestPDF({ request, logoUrl }: { request: any; logoUrl: string }) {
  const ref = request?.reference ?? `REQ-${request?.id ?? "0"}`;

  return (
    <Document title={`Inspection Request – ${request?.company_name ?? "Request"}`} author="Petro-Base Group">
      <Page size="A4" style={s.page}>
        <View style={s.header} fixed>
          <View style={s.headerInner}>
            <Image src={logoUrl} style={s.logo} />
            <View style={s.headerRight}>
              <Text style={s.headerEyebrow}>Petro-Base Group</Text>
              <Text style={s.headerTitle}>INSPECTION REQUEST</Text>
              <Text style={s.headerMeta}>Ref: {ref}</Text>
            </View>
          </View>
          <View style={s.goldStripe} />
        </View>

        <View style={s.body}>
          <View style={s.section}>
            <Text style={s.label}>Client</Text>
            <Text style={s.fieldText}>{request?.company_name ?? "—"}</Text>
            <Text style={[s.fieldText, { marginTop: 4 }]}>{request?.contact_person ?? "—"}</Text>
            <Text style={[s.fieldText, { marginTop: 2 }]}>{request?.email ?? "—"} {request?.phone ? ` · ${request.phone}` : ""}</Text>
          </View>

          <View style={s.section}>
            <Text style={s.label}>Project</Text>
            <Text style={s.fieldText}>{request?.inspection_type?.heading ?? "—"}</Text>
            <Text style={[s.fieldText, { marginTop: 6 }]}><Text style={{ fontFamily: "Helvetica-Bold" }}>Location: </Text>{request?.location ?? "—"}</Text>
            <Text style={[s.fieldText, { marginTop: 4 }]}><Text style={{ fontFamily: "Helvetica-Bold" }}>Start Date: </Text>{fmtDate(request?.start_date)}</Text>
            <Text style={[s.fieldText, { marginTop: 2 }]}><Text style={{ fontFamily: "Helvetica-Bold" }}>Duration: </Text>{request?.job_duration ?? "—"}</Text>
            {request?.number_of_personnel != null && (
              <Text style={[s.fieldText, { marginTop: 2 }]}><Text style={{ fontFamily: "Helvetica-Bold" }}>Personnel Required: </Text>{String(request.number_of_personnel)}</Text>
            )}
          </View>

          <View style={s.section}>
            <Text style={s.label}>Equipment & Certifications</Text>
            <Text style={s.fieldText}>Equipment Available: {request?.equipment_available ? "Yes" : "No"}</Text>
            {request?.equipment_details && <Text style={[s.fieldText, { marginTop: 4 }]}>{request.equipment_details}</Text>}
            {request?.certification_required && request.certification_required.length > 0 && (
              <Text style={[s.fieldText, { marginTop: 6 }]}>Certifications: {request.certification_required.join(", ")}</Text>
            )}
          </View>

          {request?.additional_notes && (
            <View style={s.section}>
              <Text style={s.label}>Additional Notes</Text>
              <Text style={s.fieldText}>{request.additional_notes}</Text>
            </View>
          )}
        </View>

        <View style={s.footer} fixed>
          <View style={s.footerLeft}>
            <Text style={s.footerText}>KM 17 Port Harcourt Aba Expressway (By Old Toll Gate)</Text>
            <Text style={s.footerText}>Iriebe, Port Harcourt, Rivers State, Nigeria</Text>
          </View>
          <View style={s.footerCenter}>
            <Image src={logoUrl} style={{ width: 90, height: 23 }} />
          </View>
          <View style={s.footerRight}>
            <Text style={s.footerText}>+234-706-749-5538</Text>
            <Text style={s.footerText}>info@petrobasegroup.com</Text>
          </View>
        </View>
      </Page>
    </Document>
  );
}

export default RequestPDF;