Further CSV Import method added

app/(dashboard)/projects/[id]/import-edl/EdlImportClient.tsx

@@ -17,10 +17,11 @@ import {
   FilePlus2,
   Pencil,
   Film,
+  FileSpreadsheet,
 } from "lucide-react";
-import { parseEdlCsv, parsePictureTrackerCsv } from "@/lib/edl-utils";
-import type { EdlImportRow, PictureTrackerRow } from "@/lib/edl-utils";
-import { importShotsFromEdl, updateShotsSeqTimecodes } from "@/actions/shots";
+import { parseEdlCsv, parsePictureTrackerCsv, parseSimpleCsv } from "@/lib/edl-utils";
+import type { EdlImportRow, PictureTrackerRow, SimpleCsvRow } from "@/lib/edl-utils";
+import { importShotsFromEdl, updateShotsSeqTimecodes, importShotsFromSimpleCsv } from "@/actions/shots";
 
 interface EdlImportClientProps {
   projectId: string;
@@ -54,6 +55,15 @@ export function EdlImportClient({ projectId, projectName, existingShotCodes }: E
   const [importing, setImporting] = useState(false);
   const [result, setResult] = useState<{ created: string[]; updated: string[]; skipped: string[]; errors: string[] } | null>(null);
 
+  // ── Simple CSV state ────────────────────────────────────────────────────────
+  const scFileInputRef = useRef<HTMLInputElement>(null);
+  const [scStep, setScStep] = useState<"input" | "preview" | "result">("input");
+  const [scCsvText, setScCsvText] = useState("");
+  const [scRows, setScRows] = useState<SimpleCsvRow[]>([]);
+  const [scErrors, setScErrors] = useState<string[]>([]);
+  const [scImporting, setScImporting] = useState(false);
+  const [scResult, setScResult] = useState<{ created: string[]; updated: string[]; skipped: string[]; errors: string[] } | null>(null);
+
   // ── Picture Tracker state ─────────────────────────────────────────────────
   const ptFileInputRef = useRef<HTMLInputElement>(null);
   const [ptStep, setPtStep] = useState<"input" | "preview" | "result">("input");
@@ -128,6 +138,61 @@ export function EdlImportClient({ projectId, projectName, existingShotCodes }: E
     setResult(null);
   };
 
+  // ── Simple CSV handlers ─────────────────────────────────────────────────────
+  const handleScFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => setScCsvText(ev.target?.result as string ?? "");
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  const handleScParse = useCallback(() => {
+    const { rows: parsed, errors } = parseSimpleCsv(scCsvText, existingShotCodes);
+    setScErrors(errors);
+    setScRows(parsed);
+    if (parsed.length > 0) setScStep("preview");
+  }, [scCsvText, existingShotCodes]);
+
+  const toggleScAction = (idx: number) => {
+    setScRows((prev) =>
+      prev.map((r, i) => {
+        if (i !== idx) return r;
+        const cycle: SimpleCsvRow["action"][] = ["create", "update", "skip"];
+        const next = cycle[(cycle.indexOf(r.action) + 1) % cycle.length];
+        return { ...r, action: next };
+      })
+    );
+  };
+
+  const handleScImport = async () => {
+    setScImporting(true);
+    try {
+      const res = await importShotsFromSimpleCsv(projectId, scRows);
+      setScResult(res);
+      setScStep("result");
+      if (res.created.length + res.updated.length > 0) {
+        toast({
+          title: "Import complete",
+          description: `${res.created.length} created, ${res.updated.length} updated`,
+        });
+      }
+    } catch (e) {
+      toast({ title: "Import failed", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
+    } finally {
+      setScImporting(false);
+    }
+  };
+
+  const handleScReset = () => {
+    setScStep("input");
+    setScCsvText("");
+    setScRows([]);
+    setScErrors([]);
+    setScResult(null);
+  };
+
   // ── Picture Tracker handlers ──────────────────────────────────────────────
   const handlePtFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -426,6 +491,193 @@ export function EdlImportClient({ projectId, projectName, existingShotCodes }: E
           </div>
         )}
 
+        {/* ── SIMPLE CSV PANEL ──────────────────────────────────────────── */}
+        <div className="pt-6 border-t border-zinc-800 space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-white">Import Shots from Simple CSV</h2>
+            <p className="text-sm text-zinc-500 mt-0.5">
+              Create or update shots from a CSV with <span className="font-mono text-zinc-300">Shot Name</span>, <span className="font-mono text-zinc-300">Time Code In</span>, <span className="font-mono text-zinc-300">Time Code Out</span>, <span className="font-mono text-zinc-300">Description</span>.
+            </p>
+          </div>
+
+          {scStep === "input" && (
+            <div className="space-y-4">
+              <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5 space-y-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-medium text-zinc-300">Paste CSV or upload file</p>
+                  <div className="flex items-center gap-2">
+                    <input ref={scFileInputRef} type="file" accept=".csv,text/csv" className="hidden" onChange={handleScFileUpload} />
+                    <Button variant="outline" size="sm" className="gap-1.5 h-7" onClick={() => scFileInputRef.current?.click()}>
+                      <Upload className="h-3.5 w-3.5" />
+                      Upload .csv
+                    </Button>
+                  </div>
+                </div>
+
+                <Textarea
+                  value={scCsvText}
+                  onChange={(e) => setScCsvText(e.target.value)}
+                  placeholder={`Shot Name,Time Code In,Time Code Out,Description\nUNG_108_001_010,01:00:10:00,01:00:20:00,Hero wide shot`}
+                  className="font-mono text-xs min-h-[200px] bg-zinc-950 border-zinc-700 resize-y"
+                  spellCheck={false}
+                />
+
+                <div className="rounded-lg bg-zinc-950 border border-zinc-800 p-3 text-xs text-zinc-400 space-y-1">
+                  <p className="font-medium text-zinc-300">Expected format</p>
+                  <p>Required: <span className="font-mono text-amber-400">Shot Name</span></p>
+                  <p>Optional: <span className="font-mono text-zinc-400">Time Code In, Time Code Out, Description</span></p>
+                  <p>Existing shots will be set to <span className="font-mono text-blue-400">update</span>; new shots to <span className="font-mono text-emerald-400">create</span>. Toggle per row in the preview.</p>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <Button onClick={handleScParse} disabled={!scCsvText.trim()} className="gap-2">
+                  <FileSpreadsheet className="h-4 w-4" />
+                  Parse &amp; Preview
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {scStep === "preview" && (() => {
+            const scCreate = scRows.filter((r) => r.action === "create").length;
+            const scUpdate = scRows.filter((r) => r.action === "update").length;
+            const scSkip   = scRows.filter((r) => r.action === "skip").length;
+            return (
+              <div className="space-y-4">
+                <div className="flex flex-wrap items-center gap-3">
+                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm">
+                    <FilePlus2 className="h-3.5 w-3.5" />
+                    {scCreate} to create
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm">
+                    <Pencil className="h-3.5 w-3.5" />
+                    {scUpdate} to update
+                  </div>
+                  {scSkip > 0 && (
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-zinc-500/10 border border-zinc-500/20 text-zinc-400 text-sm">
+                      <SkipForward className="h-3.5 w-3.5" />
+                      {scSkip} to skip
+                    </div>
+                  )}
+                </div>
+
+                {scErrors.length > 0 && (
+                  <div className="rounded-lg bg-red-500/10 border border-red-500/20 p-3 space-y-1">
+                    <p className="text-xs font-medium text-red-400 flex items-center gap-1.5">
+                      <AlertCircle className="h-3.5 w-3.5" /> {scErrors.length} parse warning{scErrors.length !== 1 ? "s" : ""}
+                    </p>
+                    {scErrors.map((e, i) => <p key={i} className="text-xs text-red-300 pl-5">{e}</p>)}
+                  </div>
+                )}
+
+                <div className="rounded-xl border border-zinc-800 overflow-hidden">
+                  <div className="grid grid-cols-[auto_1fr_1fr_1fr_2fr] text-xs font-medium text-zinc-500 uppercase tracking-wider bg-zinc-900 px-4 py-2.5 gap-4 border-b border-zinc-800">
+                    <span>Action</span>
+                    <span>Shot Code</span>
+                    <span>Seq TC In</span>
+                    <span>Seq TC Out</span>
+                    <span>Description</span>
+                  </div>
+                  <div className="divide-y divide-zinc-800/60 bg-zinc-950/40 max-h-[400px] overflow-y-auto">
+                    {scRows.map((row, i) => {
+                      const ActionIcon = ACTION_ICONS[row.action];
+                      return (
+                        <div key={i} className="grid grid-cols-[auto_1fr_1fr_1fr_2fr] items-center gap-4 px-4 py-3 text-sm">
+                          <button
+                            onClick={() => toggleScAction(i)}
+                            title="Click to cycle: create → update → skip"
+                            className={cn(
+                              "inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-xs font-medium transition-colors shrink-0",
+                              ACTION_STYLES[row.action]
+                            )}
+                          >
+                            <ActionIcon className="h-3 w-3" />
+                            {row.action}
+                          </button>
+                          <span className="font-mono text-xs text-zinc-200 truncate">{row.shotCode}</span>
+                          <span className="font-mono text-xs text-zinc-400">{row.seqTimecodeStart || "—"}</span>
+                          <span className="font-mono text-xs text-zinc-400">{row.seqTimecodeEnd || "—"}</span>
+                          <span className="text-xs text-zinc-500 truncate">{row.description || "—"}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <Button variant="outline" onClick={handleScReset}>
+                    <ArrowLeft className="h-4 w-4 mr-1.5" /> Back
+                  </Button>
+                  <Button
+                    onClick={handleScImport}
+                    disabled={scImporting || (scCreate + scUpdate === 0)}
+                    className="gap-2"
+                  >
+                    {scImporting ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                    {scImporting ? "Importing…" : `Import ${scCreate + scUpdate} shot${scCreate + scUpdate !== 1 ? "s" : ""}`}
+                  </Button>
+                </div>
+              </div>
+            );
+          })()}
+
+          {scStep === "result" && scResult && (
+            <div className="space-y-4">
+              <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-6 space-y-5">
+                <h2 className="text-base font-semibold text-white flex items-center gap-2">
+                  <CheckCircle2 className="h-5 w-5 text-emerald-400" />
+                  Import complete
+                </h2>
+                {scResult.created.length > 0 && (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-emerald-400 uppercase tracking-wide">Created ({scResult.created.length})</p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {scResult.created.map((c) => (
+                        <span key={c} className="font-mono text-xs px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-300">{c}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {scResult.updated.length > 0 && (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-blue-400 uppercase tracking-wide">Updated ({scResult.updated.length})</p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {scResult.updated.map((c) => (
+                        <span key={c} className="font-mono text-xs px-2 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300">{c}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {scResult.skipped.length > 0 && (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-zinc-500 uppercase tracking-wide">Skipped ({scResult.skipped.length})</p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {scResult.skipped.map((c) => (
+                        <span key={c} className="font-mono text-xs px-2 py-0.5 rounded bg-zinc-800 border border-zinc-700 text-zinc-400">{c}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {scResult.errors.length > 0 && (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-red-400 uppercase tracking-wide flex items-center gap-1.5">
+                      <AlertCircle className="h-3.5 w-3.5" /> Errors ({scResult.errors.length})
+                    </p>
+                    {scResult.errors.map((e, i) => (
+                      <p key={i} className="text-xs text-red-300 pl-5">{e}</p>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button variant="outline" onClick={handleScReset}>Import Another</Button>
+                <Button onClick={() => router.push(`/projects/${projectId}`)}>Back to Project</Button>
+              </div>
+            </div>
+          )}
+        </div>
+
         {/* ── PICTURE TRACKER PANEL ─────────────────────────────────────── */}
         <div className="pt-6 border-t border-zinc-800 space-y-4">
           <div>