/* Dulius App UI Kit — Document Center */

const DULIUS_DOC_UPLOADS_KEY = "dulius:document-uploads:v1";
const DOC_STATUS = {
  verified: { tone: "success", label: "Verified", icon: "check" },
  pending: { tone: "warning", label: "Pending", icon: "clock" },
  expired: { tone: "danger", label: "Expired", icon: "alert-circle" },
  missing: { tone: "neutral", label: "Not uploaded", icon: "upload" },
};

function saveDocumentUpload(doc, file) {
    if (file && window.duliusUploadDocument) { try { window.duliusUploadDocument(file, doc); } catch (e) {} }
  const record = {
    id: "DOC-" + Date.now().toString(36).toUpperCase(),
    documentName: doc.name,
    fileName: file && file.name,
    size: file && file.size,
    uploadedAt: new Date().toISOString(),
    status: "pending",
  };
  try {
    const existing = JSON.parse(localStorage.getItem(DULIUS_DOC_UPLOADS_KEY) || "[]");
    localStorage.setItem(DULIUS_DOC_UPLOADS_KEY, JSON.stringify([record].concat(existing).slice(0, 20)));
  } catch (e) {}
  return record;
}

function docMeta(d) {
  if (d.via) return d.via;
  if (d.note) return d.note;
  if (d.date && d.expires) return d.date + " · expires " + d.expires;
  if (d.date) return d.date;
  return "Required for funding";
}

function DocRow({ d, optional, onUpload }) {
  const st = DOC_STATUS[d.status];
  const dotColor = { verified: "#21813F", pending: "#F5A623", expired: "#E05C5C", missing: "#97A39B" }[d.status];
  return (
    <div className="ddocrow">
      <span className="ddocrow-icon" style={{ color: dotColor }}><Icon name={d.icon} size={20} /></span>
      <div className="ddocrow-txt">
        <div className="ddocrow-namerow">
          <span className="ddocrow-name">{d.name}</span>
          {d.boost && <span className="ddocrow-boost">{d.boost}</span>}
        </div>
        <div className="ddocrow-meta">{docMeta(d)}</div>
      </div>
      <Badge tone={st.tone} dot={d.status !== "missing"}>{st.label}</Badge>
      <button className={"dchip " + (d.status === "missing" ? "" : "ghost")} onClick={() => onUpload(d)}>
        <Icon name={d.status === "missing" ? "upload" : "refresh-cw"} size={15} /> {d.status === "missing" ? "Upload" : "Replace"}
      </button>
    </div>
  );
}

function Documents() {
  const d = DULIUS.documents;
  const [required, setRequired] = React.useState(d.required);
  const [optional, setOptional] = React.useState(d.optional);
  const [uploading, setUploading] = React.useState(null);
  const [file, setFile] = React.useState(null);
  const [saved, setSaved] = React.useState(null);

  const openUpload = (doc) => { setUploading(doc); setFile(null); setSaved(null); };
  const updateDoc = (doc, uploadRecord) => ({ ...doc, status: "pending", note: uploadRecord.fileName + " uploaded for review" });
  const completeUpload = () => {
    if (!uploading || !file) return;
    const record = saveDocumentUpload(uploading, file);
    setRequired((items) => items.map((doc) => doc.name === uploading.name ? updateDoc(doc, record) : doc));
    setOptional((items) => items.map((doc) => doc.name === uploading.name ? updateDoc(doc, record) : doc));
    setSaved(record);
    setUploading(null);
    setFile(null);
  };

  return (
    <div className="dscreen">
      <Card className="ddocsec-banner" pad={false}>
        <div className="ddocsec-banner-in">
          <div className="ddocsec-banner-icon"><Icon name="lock" size={20} /></div>
          <div className="ddocsec-banner-txt">
            <div className="ddocsec-banner-t">Bank-grade encrypted storage</div>
            <div className="ddocsec-banner-s">Every document is stored with 256-bit encryption and shared with funders only when you apply.</div>
          </div>
          <button className="dselbtn primary" style={{ position: "static" }} onClick={() => openUpload({ name: "General document", status: "missing", icon: "upload" })}><Icon name="upload" size={16} /> Upload a document</button>
        </div>
      </Card>

      {saved && <Card className="dpanel dplan-note"><Icon name="clock" size={20} /><div>{saved.documentName} uploaded as {saved.fileName}. Status: pending review.</div></Card>}

      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Connected accounts</h3></div>
        <div className="ddoc-connected">
          {d.connected.map((c, i) => (
            <div key={i} className="ddoc-conn">
              <span className="ddoc-conn-icon"><Icon name={i === 0 ? "landmark" : "gauge"} size={18} /></span>
              <div className="ddoc-conn-txt"><div className="ddoc-conn-name">{c.name}</div><div className="ddoc-conn-via">{c.via} · synced {c.synced}</div></div>
              <Badge tone="success" dot>Connected</Badge>
              <button className="dchip ghost" onClick={() => openUpload({ name: c.name + " document", status: "missing", icon: "file-text" })}>Manage</button>
            </div>
          ))}
        </div>
      </Card>

      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Required documents</h3><Badge tone="success">{required.filter((doc) => doc.status === "verified").length} of {required.length} verified</Badge></div>
        <div className="ddocrows">{required.map((doc, i) => <DocRow key={i} d={doc} onUpload={openUpload} />)}</div>
      </Card>

      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Optional — boost your profile</h3><Badge tone="neutral">Recommended</Badge></div>
        <p className="dboostsec-sub" style={{ marginTop: "-8px", marginBottom: 14 }}>Not required, but each one strengthens your profile and can unlock more offers.</p>
        <div className="ddocrows">{optional.map((doc, i) => <DocRow key={i} d={doc} optional onUpload={openUpload} />)}</div>
      </Card>

      {uploading && (
        <div className="dmodal-scrim" onClick={() => setUploading(null)}>
          <div className="dmodal wide" onClick={(e) => e.stopPropagation()}>
            <h3 className="dmodal-t left">Upload {uploading.name}</h3>
            <p className="dmodal-s left">PDF, image, spreadsheet, and document files are accepted. This first version stores the upload request locally until secure file storage is connected.</p>
            <label className="dcardf full"><span>Choose file</span><div className="ofield-in"><Icon name="paperclip" size={18} /><input type="file" onChange={(e) => setFile(e.target.files && e.target.files[0])} /></div></label>
            {file && <div className="dmodal-info"><Icon name="file-check-2" size={15} /> {file.name} ready to upload</div>}
            <Button variant="accent" style={{ width: "100%" }} icon="upload" onClick={completeUpload}>{file ? "Save upload" : "Choose a file first"}</Button>
            <button className="dmodal-cancel" onClick={() => setUploading(null)}>Cancel</button>
          </div>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Documents, DocRow, saveDocumentUpload });